Extjs-树 Ext.tree.TreePanel

文章源址：http://blog.csdn.net/itlwc/article/details/7873869

1.简单的树

效果图

代码

[javascript]  view plain copy

1. <script type="text/javascript" defer>  
2.     Ext.onReady(function(){  
3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
4.         var tree = new Ext.tree.TreePanel({  
5.             region: 'center',  
6.             //True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条  
7.             collapsible: true,  
8.             title: '标题',//标题文本  
9.             width: 200,  
10.             border : false,//表框  
11.             autoScroll: true,//自动滚动条  
12.             animate : true,//动画效果  
13.             rootVisible: true,//根节点是否可见  
14.             split: true,  
15.             tbar:[{  
16.                 text:'展开',  
17.                 handler:function(){  
18.                         tree.expandAll();  
19.                 }  
20.             },'-',{  
21.                 text:'折叠',  
22.                 handler:function(){  
23.                     tree.collapseAll();  
24.                     tree.root.expand();  
25.                 }  
26.             }],  
27.             listeners: {  
28.                 click: function(node) {  
29.                     //得到node的text属性  
30.                     Ext.Msg.alert('消息', '你点击了: "' + node.attributes.text+"'");  
31.                 }  
32.             }  
33.         });  
34.         var root = new Ext.tree.TreeNode({text:'我是根'});  
35.         var root_node1 = new Ext.tree.TreeNode({text:'我是根的1枝'});  
36.         var root_node2 = new Ext.tree.TreeNode({text:'我是根的2枝'});  
37.         //插入节点为该节点的最后一个子节点  
38.         root.appendChild(root_node1);  
39.         root.appendChild(root_node2);  
40.         //设置根节点  
41.         tree.setRootNode(root);  
42.         new Ext.Viewport({  
43.             items: [tree]  
44.         });  
45.     });  
46. </script>  

2.使用TreeLoader获得后台数据

[plain]  view plain copy

1. 每个节点最后一级必须是叶子节点,否则会出现无限循环  
2. TreeNode并不支持Ajax,需要把根节点换成AsyncTreeNode实现异步加载效果  

list.txt

[plain]  view plain copy

1. [{    
2.         text : '01',    
3.         children : [    
4.             { text : '01-01' , leaf : true },  
5.             { text : '01-02' , leaf : true }    
6.         ]    
7.     },{    
8.         text :'02',    
9.         children : [    
10.             { text : '02-01' , leaf : true },  
11.             { text : '02-02' , leaf : true }  
12.         ]  
13. }]  

index.jsp

[javascript]  view plain copy

1. <script type="text/javascript" defer>  
2.     Ext.onReady(function(){  
3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
4.         var tree = new Ext.tree.TreePanel({  
5.             region: 'center',  
6.             collapsible: true,  
7.             title: 'TreeLoader获得后台数据',  
8.             width: 200,  
9.             border : false,  
10.             autoScroll: true,  
11.             animate : true,  
12.             rootVisible: false,  
13.             split: true,  
14.             loader : new Ext.tree.TreeLoader({  
15.                 dataUrl : 'list.txt'  
16.             }),  
17.             root: new Ext.tree.AsyncTreeNode({  
18.                 //进入时是否展开  
19.                 expanded:false,  
20.                 text:'根节点'  
21.             }),  
22.             listeners: {      
23.                 afterrender: function(node) {      
24.                     tree.expandAll();//展开树   
25.                 }      
26.             }  
27.         });  
28.         new Ext.Viewport({  
29.             items: [tree]  
30.         });  
31.     });  
32. </script>  

3.读取本地JSON数据

[javascript]  view plain copy

1. 因为有的树形的数据并不多,为了获得如此少量的数据而使用Ajax访问后台不划算,  
2. 如果退回到每个节点都使用new来生成,又实在太麻烦,  
3. 那么能不能让TreeLoader读取本地的JavaScript中的JSON数据,然后生成需要的树节点呢  

[javascript]  view plain copy

1. <script type="text/javascript" defer>    
2.     Ext.onReady(function(){    
3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';    
4.         var tree = new Ext.tree.TreePanel({    
5.             region: 'center',    
6.             //True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条    
7.             collapsible: true,    
8.             title: '标题',//标题文本    
9.             width: 200,    
10.             border : false,//表框    
11.             autoScroll: true,//自动滚动条    
12.             animate : true,//动画效果    
13.             rootVisible: false,//根节点是否可见    
14.             split: true,    
15.             loader : new Ext.tree.TreeLoader(),    
16.             root : new Ext.tree.AsyncTreeNode({    
17.                 text:'我是根',    
18.                 children:[{    
19.                     text : '01',    
20.                     children : [    
21.                         { text : '01-01' , leaf : true },  
22.                         { text : '01-02' , leaf : true }    
23.                     ]    
24.                 },{    
25.                     text :'02',    
26.                     children : [    
27.                         { text : '02-01' , leaf : true },  
28.                         { text : '02-02' , leaf : true }  
29.                     ]  
30.                 }]    
31.             }),  
32.             listeners: {        
33.                 afterrender: function(node) {        
34.                     tree.expandAll();//展开树     
35.                 }        
36.             }     
37.         });    
38.         new Ext.Viewport({    
39.             items: [tree]    
40.         });    
41.     });    
42. </script>  

4.使用JSP提供后台数据

[plain]  view plain copy

1. 树形异步读取的关键是node参数,当某一个节点展开时,treeLoader会根据设置的dataUrl去后台读取数据,  
2. 而发送请求时,treeLoader会把这个节点的Id作为参数一起发送到后台,对于后台来说,只要获取node参数,  
3. 就知道是哪个节点正在执行展开,  
4. 如果返回的子节点数据包含leaf:true属性,AsyncTreeNode就会生成TreeNode节点,并标记为叶子  

list.jsp

[javascript]  view plain copy

1. <%@ page language="java"  pageEncoding="UTF-8"%>  
2. <%     
3.     request.setCharacterEncoding("UTF-8");  
4.     response.setCharacterEncoding("UTF-8");  
5.     //获取node参数,对应的是正在展开的节点id  
6.     String node = request.getParameter("node");  
7.     System.out.println("node="+node);  
8.     String json =  
9.     "["+  
10.     "{id:1,text:'01',"+  
11.         "children:["+  
12.             "{id:11,text:'01-01',leaf:true},"+  
13.             "{id:12,text:'01-02',leaf:true}"+  
14.          "]}"+  
15.     ",{id:2,text:'02',"+  
16.         "children:["+  
17.             "{id:21,text:'02-01',leaf:true},"+  
18.             "{id:22,text:'02-02',leaf:true}"+  
19.          "]}"+  
20.     "]";  
21.     response.getWriter().write(json);  
22. %>  

index.jsp

[javascript]  view plain copy

1. <script type="text/javascript" defer>  
2.     Ext.onReady(function(){  
3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
4.         var tree = new Ext.tree.TreePanel({  
5.             region: 'center',    
6.             collapsible: true,    
7.             title: '标题',     
8.             width: 200,    
9.             border : false,   
10.             autoScroll: true,     
11.             animate : true,    
12.             rootVisible: false,   
13.             split: true,  
14.             loader : new Ext.tree.TreeLoader({  
15.                 dataUrl : 'list.jsp'  
16.             }),  
17.             root : new Ext.tree.AsyncTreeNode({  
18.                 //设置id,让后台知道应该在何时返回根节点的子点数据  
19.                 id : '0',  
20.                 text : '我是根'  
21.             }),  
22.             listeners: {      
23.                 afterrender: function(node) {      
24.                     tree.expandAll();//展开树   
25.                 }      
26.             }  
27.         });  
28.         new Ext.Viewport({  
29.             items: [tree]  
30.         });  
31.     });  
32. </script>  

5.树的事件

[javascript]  view plain copy

1. listeners: {  
2.     click: function(node) {  
3.         Ext.Msg.alert('消息', '你点击了: "' + node.attributes.text);  
4.          
5.     },  
6.     dblclick:function(node){  
7.         alert('你双击了'+node);  
8.     },  
9.     expandnode:function(node){  
10.         alert(node+'展开了'+node.attributes.text);  
11.     },  
12.     collapsenode:function(node){  
13.         alert(node+'折叠了'+node.attributes.text);  
14.     }  
15. }  

6.右边菜单

效果图

list.txt

[plain]  view plain copy

1. [{    
2.         text : '01',    
3.         children : [    
4.             { text : '01-01' , leaf : true },  
5.             { text : '01-02' , leaf : true }    
6.         ]    
7.     },{    
8.         text :'02',    
9.         children : [    
10.             { text : '02-01' , leaf : true },  
11.             { text : '02-02' , leaf : true }  
12.         ]  
13. }]  

index.jsp

[javascript]  view plain copy

1. <script type="text/javascript" defer>  
2.     Ext.onReady(function(){  
3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
4.         var node_id;  
5.         var tree = new Ext.tree.TreePanel({  
6.             region: 'center',  
7.             collapsible: true,  
8.             title: '右键菜单',  
9.             width: 200,  
10.             border : false,  
11.             animate : true,  
12.             rootVisible: false,  
13.             autoScroll: true,  
14.             split: true,  
15.             loader : new Ext.tree.TreeLoader({  
16.                 dataUrl : 'list.txt'  
17.             }),  
18.             root: new Ext.tree.AsyncTreeNode({  
19.                 //设置id,让后台知道应该在何时返回根节点的子点数据     
20.                 id : '0',    
21.                 text : '我是根'  
22.             }),  
23.             listeners: {      
24.                 afterrender: function(node) {      
25.                         //展开树      
26.                         tree.expandAll();  
27.                     }      
28.                }  
29.         });  
30.         var cc = new Ext.menu.Menu({  
31.             items :[{  
32.                 text: '增加',  
33.                 handler : function(){  
34.                     alert(node_id.attributes.text);  
35.                     cc.hide();//隐藏  
36.                 }  
37.             },{  
38.                 text: '删除',  
39.                 handler : function(){  
40.                     alert('删除');  
41.                 }  
42.             },{  
43.                 text: '修改',  
44.                 handler : function(){  
45.                     alert('修改');  
46.                 }  
47.             }]  
48.         });  
49.         tree.on('contextmenu',function(node,e){  
50.             e.preventDefault();//阻止浏览器默认弹出功能菜单  
51.             node.select();//选中当前节点  
52.             //var array = new Array(500,500);//可以自定义坐标  
53.             var array = e.getXY();//获取事件的页面坐标  
54.             cc.showAt(array);//在指定的位置显示该菜单  
55.             node_id = node;  
56.         });  
57.         new Ext.Viewport({  
58.             items: [tree]  
59.         });  
60.     });  
61. </script>  

7.给树节点设置图片和超链接

list.txt

[plain]  view plain copy

1. [{    
2.         text : '01',    
3.         children : [    
4.             { text : '01-01' , leaf : true , icon : 'image/qq.jpg' },  
5.             { text : '01-02' , leaf : true , href : 'http://www.baidu.com' }    
6.         ]    
7.     },{    
8.         text :'02',    
9.         children : [    
10.             { text : '02-01' , leaf : true },  
11.             { text : '02-02' , leaf : true }  
12.         ]  
13. }]  

8.修改树节点的标题

list.txt

[plain]  view plain copy

1. [{    
2.         text : '01',    
3.         children : [    
4.             { text : '01-01' , leaf : true },  
5.             { text : '01-02' , leaf : true }    
6.         ]    
7.     },{    
8.         text :'02',    
9.         children : [    
10.             { text : '02-01' , leaf : true },  
11.             { text : '02-02' , leaf : true }  
12.         ]  
13. }]  

index.jsp

[javascript]  view plain copy

1. <script type="text/javascript" defer>    
2.     Ext.onReady(function(){    
3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';    
4.         var tree = new Ext.tree.TreePanel({    
5.             region: 'center',    
6.             collapsible: true,    
7.             title: '修改节点标题',   
8.             width: 200,    
9.             border : false,  
10.             animate : true,  
11.             rootVisible: false,  
12.             autoScroll: true,  
13.             split: true,    
14.             loader : new Ext.tree.TreeLoader({    
15.                 dataUrl : 'list.txt'    
16.             }),    
17.             root: new Ext.tree.AsyncTreeNode({    
18.                 id : '0',      
19.                 text : '我是根'    
20.             }),  
21.             listeners: {      
22.                 afterrender: function(node) {      
23.                    //展开树      
24.                    tree.expandAll();      
25.                 }  
26.             }    
27.         });    
28.             
29.         //为树节点提供即时的编辑功能    
30.         var treeEditor = new Ext.tree.TreeEditor(tree,new Ext.form.TextField({    
31.             allowBlank : false    
32.         }));    
33.         /*  
34.             编辑器开始初始化,但在修改值之前触发,  
35.             若事件句柄返回false则取消整个编辑事件  
36.             editor : treeEditor本身  
37.             value : 正被设置的值  
38.         */    
39.         treeEditor.on('beforestartedit',function(editor,element,value){    
40.             var treeNode = editor.editNode;    
41.             var boolean  = treeNode.isLeaf();    
42.             return boolean;    
43.         });    
44.         /*  
45.             完成修改后,按下Enter就会触发这个事件,我们可以监听函数得到修改后的数据  
46.             editor : treeEditor本身  
47.             value : 修改后的值  
48.             startValue : 改变后的值  
49.         */    
50.         treeEditor.on('complete',function(editor,value,startValue){    
51.             alert('将要设置的值: '+editor.editNode.text+' 原来的值: '+startValue+" 改变后的值: "+value)    
52.         });    
53.             
54.         new Ext.Viewport({    
55.             items: [tree]    
56.         });    
57.     });    
58. </script>  

9.树的拖放

[plain]  view plain copy

1. 如果让树节点可以自由拖放,创建TreePanel时设置enableDD:true即可  
2. 不过直接设置只能实现叶子与枝干和根之间的拖放,叶子不能拖放到叶子下  

list.txt

[plain]  view plain copy

1. [{    
2.         text : '01',    
3.         children : [    
4.             { text : '01-01' , leaf : true },  
5.             { text : '01-02' , leaf : true }    
6.         ]    
7.     },{    
8.         text :'02',    
9.         children : [    
10.             { text : '02-01' , leaf : true },  
11.             { text : '02-02' , leaf : true }  
12.         ]  
13. }]  

inde.jsp

[javascript]  view plain copy

1. <script type="text/javascript" defer>    
2.     Ext.onReady(function(){    
3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';    
4.         var tree = new Ext.tree.TreePanel({    
5.             region: 'center',    
6.             collapsible: true,    
7.             title: '树的拖动',   
8.             width: 200,    
9.             border : false,  
10.             animate : true,   
11.             rootVisible: false,  
12.             autoScroll: true,  
13.             split: true,    
14.             enableDD : true,//支持拖放    
15.             loader : new Ext.tree.TreeLoader({    
16.                 dataUrl : 'list.txt'    
17.             }),    
18.             root: new Ext.tree.AsyncTreeNode({    
19.                 id : '0',      
20.                 text : '我是根'    
21.             }),  
22.             listeners: {      
23.                 afterrender: function(node) {      
24.                    //展开树      
25.                    tree.expandAll();      
26.                 }  
27.             }    
28.         });    
29.         new Ext.Viewport({    
30.             items: [tree]    
31.         });  
32.     });    
33. </script>  

9.1 节点拖放的三种形式

[plain]  view plain copy

1. append 放下去节点会变成被砸中节点的子节点,形成父子关系,绿色加号标志  
2. above 放下的节点与目标节点是兄弟关系,放下去的节点排列在前,一个箭头两个短横线  
3. below 放下的节点与目标节点是兄弟关系,放下去的节点排列在后,两个短横线一个箭头  

9.2叶子不能append

[javascript]  view plain copy

1. tree.on('nodedragover',function(e){  
2.     //获取事件的对象  
3.     var node = e.target;//当鼠标指针经过的节点  
4.     if(node.leaf){  
5.         n.leaf = false;  
6.     }  
7.     return true;  
8. });  

9.3 判断拖放的目标

[javascript]  view plain copy

1. tree.on('nodedrop',function(e){  
2.     Ext.Msg.alert('消息','我们的节点 '+e.dropNode+' 掉到了 '+e.target+' 上,掉落方式是 '+ e.point);  
3. });  

10.树的过滤器Ext.tree.TreeFilter

list.txt

[javascript]  view plain copy

1. [{    
2.         text : '01',    
3.         children : [    
4.             { text : '01-01' , leaf : true },  
5.             { text : '01-02' , leaf : true }    
6.         ]    
7.     },{    
8.         text :'02',    
9.         children : [    
10.             { text : '02-01' , leaf : true },  
11.             { text : '02-02' , leaf : true }  
12.         ]  
13. }]  

index.jsp

[javascript]  view plain copy

1. <script type="text/javascript" defer>      
2.     Ext.onReady(function(){      
3.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';      
4.         var tree = new Ext.tree.TreePanel({      
5.             region: 'center',      
6.             collapsible: true,      
7.             title: 'tree过滤器',     
8.             width: 400,      
9.             border : false,     
10.             animate : true,      
11.             rootVisible: false,     
12.             autoScroll: true,    
13.             split: true,      
14.             loader : new Ext.tree.TreeLoader({    
15.                dataUrl : 'list.txt'    
16.             }),    
17.             root : new Ext.tree.AsyncTreeNode({    
18.                 //设置id,让后台知道应该在何时返回根节点的子点数据    
19.                 id : '0',    
20.                 text : '我是根'    
21.             }),    
22.             listeners: {    
23.                 afterrender: function(node) {    
24.                    //展开树    
25.                    tree.expandAll();    
26.                 }    
27.             },    
28.             tbar:[{    
29.                 text:'显示02',    
30.                 handler:function(){    
31.                     treeFiler.filter('02');//通过指定的属性过滤数据    
32.                 }    
33.             },'-',{    
34.                 text:'显示全部',    
35.                 handler:function(){    
36.                     treeFiler.clear();//清理现在的过滤    
37.                 }    
38.             },'-',{    
39.                 xtype : 'textfield',    
40.                 //为HTML的input输入字段激活键盘事件的代理    
41.                 enableKeyEvents : true,    
42.                 listeners  : {    
43.                     //这个事件只能在enableKeyEvents = true可用    
44.                     keyup : function(e){    
45.                         var t = this.getValue()    
46.                         /****************过滤时应该避开叶子节点**********************/    
47.                         //传递的字符串参数被正则表达式读取    
48.                         var es = Ext.escapeRe(t);    
49.                         var re = new RegExp(es,'i');    
50.                         //通过一个函数过滤,函数返回true,那么该节点将保留    
51.                         treeFiler.filterBy(function(n){    
52.                             return !n.isLeaf() || re.test(n.text);    
53.                         });    
54.                         /**********不匹配的叶子节点的父节点也隐藏**************/    
55.                         hiddenPkgs =[];    
56.                         //从该节点开始逐层下报(Bubbles up)节点,上报过程中对每个节点执行指定的函数    
57.                         tree.root.cascade(function(n){    
58.                             //当节点有子节点的时候n.ui.ctNode.offsetHeight大于3    
59.                             if(!n.isLeaf()&&n.ui.ctNode.offsetHeight<3){    
60.                                 n.ui.hide();    
61.                                 hiddenPkgs.push(n);    
62.                             }    
63.                         });    
64.                     }       
65.                 }    
66.             }]    
67.         });    
68.         var treeFiler = new Ext.tree.TreeFilter(tree,{      
69.             clearBlank : true,//如果查询的字符串为空字符串,就执行clear()      
70.             //每次过滤之前先执行clear()负责会在上次过滤结果的基础上进行查询      
71.             autoClear : true      
72.         });      
73.                
74.         new Ext.Viewport({      
75.             items: [tree]      
76.         });      
77.     });      
78. </script>  

11.利用TreeSorter对树进行排序

[plain]  view plain copy

1. TreeSorter是一个专门用来对树节点进行排序的工具  
2. caseSensitive 区分大小写,默认为false不区分大小写  
3. dir 排列方式  
4. folderSort 将叶子节点排列到非叶子节点后面 默认为false  
5. leafAttr 判断叶子节点的标志,默认为leaf,如果node中存在leaf:true参数,就认为是叶子节点  
6. property 根据节点属性排序,默认为text  

代码

[javascript]  view plain copy

1. new Ext.tree.TreeSorter(tree,{  
2.     folderSort : true  
3. });  

12.树形节点视图 Ext.tree.TreeNodeUI

[plain]  view plain copy

1. Ext.treeTreeNodeUI是生成Ext.tree.TreeNode实例时默认使用的视图组件.  
2. 在生成每一个Ext.tree.TreeNode实例时,它会先查找this.attributes.uiProvider和this.defaultUI.  
3. 如果有任何一个属性存在,它就会使用这个属性创建自己的视图.  
4. 如果这两个属性都不存在就会适应Ext.tree.TreeNodeUI创建视图.  
5. 因此,在属性结构中通常都使用Ext.tree.TreeNodeUI作为树形节点的视图.  
6. 可以通过node.ui的方式获得某个Ext.tree.TreeNode实例对应的Ext.tree.TreeNodeUI  

效果图

list.txt

[plain]  view plain copy

1. [{    
2.         text : '01',    
3.         children : [    
4.             { text : '01-01' , leaf : true , checked : false },  
5.             { text : '01-02' , leaf : true , checked : false }    
6.         ]    
7.     },{    
8.         text :'02',    
9.         children : [    
10.             { text : '02-01' , leaf : true , checked : false },  
11.             { text : '02-02' , leaf : true , checked : false }  
12.         ]  
13. }]  

index.jsp

[javascript]  view plain copy

1. <style type="text/css">  
2. .big {  
3.     font-weight: bold;  
4. }  
5. </style>  
6. <script type="text/javascript" defer>  
7.     Ext.onReady(function(){  
8.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
9.         var tree = new Ext.tree.TreePanel({  
10.             region: 'center',             
11.             collapsible: true,  
12.             title: '树形节点视图',  
13.             width: 200,  
14.             border : false,  
15.             autoScroll: true,  
16.             animate : true,  
17.             rootVisible: false,  
18.             split: true,  
19.             loader : new Ext.tree.TreeLoader({  
20.                 dataUrl : 'list.txt'  
21.             }),  
22.             root : new Ext.tree.AsyncTreeNode({  
23.                 //设置id,让后台知道应该在何时返回根节点的子点数据  
24.                 id : '0',  
25.                 text : '我是根'  
26.             }),  
27.             listeners: {  
28.                 afterrender: function(node) {  
29.                    //展开树  
30.                    tree.expandAll();  
31.                 }  
32.             }  
33.         });  
34.         new Ext.Viewport({  
35.             items: [tree]  
36.         });  
37.         tree.on('click',function(node){  
38.             //当用户点击一个节点,会获得节点对应的Ext.tree.TreeNodeUI实例  
39.             var treeNodeUI = node.ui;  
40.             //最后调用addClass()方法把文字转化为粗体  
41.             treeNodeUI.addClass('big');  
42.             (  
43.                 function(){  
44.                     treeNodeUI.removeClass('big');  
45.                 }  
46.             ).defer(1000);  
47.         });  
48.     });  
49. </script>  

[plain]  view plain copy

1. treeNodeUI的方法  
2. getAnchor(),getIconEl(),getTextEl()这3个函数可以分别获取页面上与树形对应的  
3. <a>标签,包含图标的<img>标签,包含文字的<span>标签部分  
4. hide()和show()函数可以控制树形节点是否隐藏  
5. isChecked()和toggleCheck()函数可以判断和修改树形节点中的Checkbox的状态,这两属性必须节点包含Checkbox,否则isChecked()会一直返回false  

13.表格与树的结合 Ext.ux.tree.ColumnTree()

[plain]  view plain copy

1. Ext.ux.tree.ColumnTree属于EXT的扩展件,为了使用Ext.ux.tree.ColumnTree,  
2. 我们首先需要引用Ext发布包中的column-tree.css,ColumnNodeUI.css,以及ColumnNodeUI.js三个文件  
3. 需要注意的是:我们要给每一个节点设置uiProvider:'col',这样在生成树时TreeLoader会预先定义的uiProviders参数中取得'col'对应的Ext.ux.tree.ColumnNodeUI,用它来作为显示树形节点的视图  

效果图

list.jsp

[javascript]  view plain copy

1. <%@ page language="java"  pageEncoding="UTF-8"%>  
2. <%     
3.     request.setCharacterEncoding("UTF-8");  
4.     response.setCharacterEncoding("UTF-8");  
5.     //获取node参数,对应的是正在展开的节点id  
6.     String node = request.getParameter("node");  
7.     System.out.println("node="+node);  
8.     String json =  
9.     "["+  
10.     "{km:'深入浅出ExtJs',ks:'12month',js:'',uiProvider:'col',"+  
11.         "children:["+  
12.             "{km:'ExtJs01',ks:'6month',js:'lwc',uiProvider:'col',leaf:true},"+  
13.             "{km:'ExtJs02',ks:'6month',js:'wr',uiProvider:'col',leaf:true}"+  
14.          "]}"+  
15.     ",{km:'深入浅出Java',ks:'10month',js:'',uiProvider:'col',"+  
16.         "children:["+  
17.             "{km:'Java01',ks:'4month',js:'tom',uiProvider:'col',leaf:true},"+  
18.             "{km:'Java02',ks:'6month',js:'cat',uiProvider:'col',leaf:true}"+  
19.          "]}"+  
20.     "]";  
21.     response.getWriter().write(json);  
22. %>  

index.jsp

[javascript]  view plain copy

1. <!-- 使用ColumnTree需要带入这两个文件 -->  
2. <link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/ux/css/ColumnNodeUI.css"/>  
3. <script type="text/javascript" src="<%=rootpath%>/ext/ux/ColumnNodeUI.js"></script>  
4. <script type="text/javascript" defer>  
5.     Ext.onReady(function(){  
6.         Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';  
7.         var tree = new Ext.tree.ColumnTree({  
8.             //columnTree的宽度要等于columns列总和的宽度,否则会出现错行  
9.             width: 451,  
10.             height: 200,  
11.             rootVisible:false,  
12.             autoScroll:false,  
13.             title: '示例',  
14.             columns:[{  
15.                 header:'科目',  
16.                 width:230,  
17.                 dataIndex:'km'  
18.             },{  
19.                 header:'课时',  
20.                 width:100,  
21.                 dataIndex:'ks'  
22.             },{  
23.                 header:'讲师',  
24.                 width:100,  
25.                 dataIndex:'js'  
26.             }],  
27.             loader: new Ext.tree.TreeLoader({  
28.                 dataUrl:'list.jsp',  
29.                 uiProviders:{  
30.                     'col': Ext.tree.ColumnNodeUI  
31.                 }  
32.             }),  
33.             root: new Ext.tree.AsyncTreeNode({  
34.                 //设置id,让后台知道应该在何时返回根节点的子点数据  
35.                 id : '0',  
36.                 text:'我是根'  
37.             }),  
38.             listeners: {  
39.                 afterrender: function(node) {  
40.                    //展开树  
41.                    tree.expandAll();  
42.                 }  
43.             }  
44.         });  
45.         new Ext.Viewport({  
46.             items : [tree]  
47.         });  
48.     });  
49. </script>