Extjs TreePanel示范

Extjs TreePanel示例

（图1：主菜单截图）

????? 4、当加载结点的子结点时，会向后台传送一个node参数，值为当前结点的id。如加载根节点的子节点时，会把根节点的id值“root”（见代码2的根节点的id属性）传到后台，FireBug的截图如下：

（图2：node参数截图）

????? 这样，后台就会从数据库中读取那些父结点的id为node值的结点信息，即当前结点的子结点信息。这样，本示例的结点信息在数据库表中的形式就如下图所示：

（图3：表中的结点信息）

????? 注意观察parent_id值为root的两个结点，即为图1主菜单截图中的根结点的两个子结点。

????? 同理，后台向前台发送结点信息时，也应该提供该结点的id值（参见代码3的JSON字符串），供将来加载此结点的子结点时使用。

????? 到目前为止，我们已经成功生成了树，并可以动态加载其结点信息。但我们最终的目标应该是点击TreePanel（一般放置于页面的左边）的某个叶子结点时，能在页面右部显示相关的功能页面。为了实现这个功能，应该使用Viewport，其布局为border。然后将TreePanel放置于Viewport的西区，再新建一个TabPanel，放置于Viewport的中央区。为TreePanel添加click事件处理函数，在这个函数中，若相关的页面没有被加载，则新建一个Panel加载此页面，并添加到TabPanel中，然后设置此Panel为活动的，显示给用户；若相关页面已被加载，则直接设置其为活动的即可。具体代码如下所示（注意：其中的center即为位于中央区的TabPanel）：

???????????????????????????????+?url ?
1. ?

   本文出自 “肖凡的专栏” 博客，请务必保留此出处http://legend2011.blog.51cto.com/3018495/1171733