转自:http://legend2011.blog.51cto.com/3018495/1171733
这几天用到了Extjs的TreePanel来创建树形菜单,在网上没瞧见一个好的示例,遂决定写一个,供后来者参考(本文下方的“附件下载”可下载本示例的完整源代码)。
先创建一个雏形,代码如下:
- var tree = new Ext.tree.TreePanel({
- title : '主菜单',
- width : 200,
- autoScroll : true,
- singleExpand : true,
- rootVisible : true,
- animate : true,
- //树加载器
- loader : new Ext.tree.TreeLoader({
- dataUrl : 'tree/treeNodeAction_listTree.action'
- })
- });
紧接着创建根节点,并将此根结点设置为树的根:
- var root = new Ext.tree.AsyncTreeNode({
- id : 'root',
- text : '根',
- expanded : true
- });
- //将此根结点设置为树的根
- tree.setRootNode(root);
(代码2)
这里注意以下几点:
1、AsyncTreeNode是一种异步加载的结点,即每次只加载本结点的直接子结点,而子结点的子结点(即当前结点的孙子结点)则在需要的时候再加载,这就提高了响应速度;
3、后台发送来的代表子结点信息的JSON字符串必须以方括号“[]”包含,如本例加载根节点的子结点信息的JSON字符串如下:
[{id:'module1',text:'模块1',leaf:false},{id:'module2',text:'模块2',leaf:true,url:'demo/module2.jsp'}]
(代码3)
(图1:主菜单截图)
(图2:node参数截图)
这样,后台就会从数据库中读取那些父结点的id为node值的结点信息,即当前结点的子结点信息。这样,本示例的结点信息在数据库表中的形式就如下图所示:
注意观察parent_id值为root的两个结点,即为图1主菜单截图中的根结点的两个子结点。
同理,后台向前台发送结点信息时,也应该提供该结点的id值(参见代码3的JSON字符串),供将来加载此结点的子结点时使用。
到目前为止,我们已经成功生成了树,并可以动态加载其结点信息。但我们最终的目标应该是点击TreePanel(一般放置于页面的左边)的某个叶子结点时,能在页面右部显示相关的功能页面。为了实现这个功能,应该使用Viewport,其布局为border。然后将TreePanel放置于Viewport的西区,再新建一个TabPanel,放置于Viewport的中央区。为TreePanel添加click事件处理函数,在这个函数中,若相关的页面没有被加载,则新建一个Panel加载此页面,并添加到TabPanel中,然后设置此Panel为活动的,显示给用户;若相关页面已被加载,则直接设置其为活动的即可。具体代码如下所示(注意:其中的center即为位于中央区的TabPanel):
- listeners : {
- click : function(node) {
- // node代表被点击的结点,通过其attributes属性读取
- // 后台传来的url等属性,url指该结点指向的页面
- var url = node.attributes.url;
- var id = node.attributes.id;
- // 从center中获取相关的Panel
- var tab = center.getItem('tab_' + id);
- // 只有当url存在,才进行后续处理
- if (url) {
- // 如果相关的Panel已存在,直接将其设置为活动的即可
- if (tab) {
- center.setActiveTab(tab);
- } else {
- // 否则创建一个Panel,用于加载url指向的页面,然后
- // 将此Panel添加到center中,并设置其为活动的
- tab = new Ext.Panel({
- title : node.attributes.text,
- html : "<iframe src=\'#\'" /span>
- + url
- + "'"
- + " width='100%' height='100%' frameborder='0' scrolling='auto'>"
- + "</ifame>",
- closable : true,
- layout : 'fit',
- frame : false,
- id : 'tab_' + id
- });
- center.add(tab);
- center.setActiveTab(tab);
- }
- }
- }
- }
(代码4)
需要注意的是,只有叶子结点才有url属性,这一点从代码3的JSON字符串即可看出:id为module1的结点为非叶子结点,因而后台并没有给它传递url信息;而id为module2的结点为叶子结点,就有url属性。
效果如图所示(本示例的完整源代码请于本文下方的“附件下载”处下载):
本文出自 “肖凡的专栏” 博客,请务必保留此出处http://legend2011.blog.51cto.com/3018495/1171733