ExtJS学习之TreePanel

ExtJS学习之TreePanel

2012-10-28 22:47  2374人阅读  评论(0)  收藏  举报

  分类：

 

Ext（2）   ExtJS（2） 

1 树（Tree Panel）

在Web应用程序开发中，Tree Panel使用的频率很高。Tree Panel是ExtJS的核心组件之一，Tree Panel和Grid Panel一样都是从相同的类（Ext.panel.Table）扩展，

因此Tree Panel具有Grid Panel的所有功能，Grid Panel的features、extensions和plugins在Tree Panel也能使用。Tree Panel的实现非常方便，通过以下代码就能生成一个简单的Tree。

[javascript]  view plain  copy

1. Ext.create('Ext.tree.Panel', {  
2.     renderTo: Ext.getBody(),  
3.     title: 'Simple Tree',  
4.     width: 150,  
5.     height: 150,  
6.     root: {  
7.         text: 'Root',                        //树的根节点文本  
8.         expanded: true,                      //展开Root节点  
9.         children: [                          //根节点（Root）的子节点数组  
10.             {  
11.                 text: 'Child 1',             //子节点的显示文本  
12.                 leaf: true                   //是否为叶子节点，true表示该节点是叶子节点  
13.             },  
14.             {  
15.                 text: 'Child 2',  
16.                 leaf: true  
17.             },  
18.             {  
19.                 text: 'Child 3',  
20.                 expanded: true,              //展开节点  
21.                 children: [                  //节点的子节点数组  
22.                     {  
23.                         text: 'Grandchild',  
24.                         leaf: true  
25.                     }  
26.                 ]  
27.             }  
28.         ]  
29.     }  
30. });  

Tree Panel通过TreeStore存储数据，root属性是创建TreeStore的快捷方式。在上面的代码中，使用root属性创建Tree Panel的Store。也可以像Grid Panel先创建Store，然后再把Store绑定到Tree Panel。

[javascript]  view plain  copy

1. var store = Ext.create('Ext.data.TreeStore', {  
2.     root: {  
3.         text: 'Root',  
4.         expanded: true,  
5.         children: [  
6.             {  
7.                 text: 'Child 1',  
8.                 leaf: true  
9.             },  
10.             {  
11.                 text: 'Child 2',  
12.                 leaf: true  
13.             },  
14.             ...  
15.         ]  
16.     }  
17. });  
18.   
19. Ext.create('Ext.tree.Panel', {  
20.     title: 'Simple Tree',  
21.     store: store,  //绑定上面创建的TreeStore  
22.     ...  
23. });  

2 多列树（Multiple columns）

Tree Panel和Grid Panel一样可以显示多列数据，从代码上看，多列树和普通的Grid Panel的区别在于，多列树的columns中必须有一个列是treecolumn。

[javascript]  view plain  copy

1. var tree = Ext.create('Ext.tree.Panel', {  
2.     renderTo: Ext.getBody(),  
3.     title: 'TreeGrid',  
4.     width: 300,  
5.     height: 150,  
6.     fields: ['name', 'description'],          //字段  
7.     columns: [{  
8.         xtype: 'treecolumn',                  //把列的类型设置成treecolumn  
9.         text: 'Name',  
10.         dataIndex: 'name',                    //绑定name字段  
11.         width: 150,  
12.         sortable: true  
13.     }, {  
14.         text: 'Description',  
15.         dataIndex: 'description',             //绑定description字段  
16.         flex: 1,  
17.         sortable: true  
18.     }],  
19.     root: {                                   //树的根节点，也就是TreeStore的快捷方式  
20.         name: 'Root',                         //根节点name字段的值  
21.         description: 'Root description',      //根节点description字段的值  
22.         expanded: true,                       //展开根节点  
23.         children: [{                          //根节点的子节点数组  
24.             name: 'Child 1',  
25.             description: 'Description 1',  
26.             leaf: true  
27.         }, {  
28.             name: 'Child 2',                  //节点name字段的值  
29.             description: 'Description 2',     //节点description字段的值  
30.             leaf: true  
31.         }]  
32.     }  
33. });  

3 添加树节点

树的根节点（Root）可以晚绑定，也就是在创建树时不配置树的根节点，等树创建完以后再给树添加根节点。

[javascript]  view plain  copy

1. var tree = Ext.create('Ext.tree.Panel'); //创建空树，该树没有添加节点数据  
2. tree.setRootNode({                       //通过setRootNode方法给树添加根节点  
3.     text: 'Root',                        //根节点显示文字  
4.     expanded: true,  
5.     children: [{                         //根节点的子节点数组  
6.         text: 'Child 1',  
7.         leaf: true  
8.     }, {  
9.         text: 'Child 2',  
10.         leaf: true  
11.     }]  
12. });  
13.   
14. //附加子节点  
15. var root = tree.getRootNode();           //获取树的根节点  
16. var parent = root.appendChild({          //在根节点中添加父节点  
17.     text: 'Parent 1'  
18. });  
19.   
20. parent.appendChild({                     //在父节点中添加子节点  
21.     text: 'Child 3',  
22.     leaf: true  
23. });  
24.   
25. //插入子节点  
26. var child = parent.insertChild(0, {      //在第一个位置插入子节点  
27.     text: 'Child 2.5',  
28.     leaf: true  
29. });  
30.   
31. parent.insertBefore({                    //在child节点前面插入节点  
32.     text: 'Child 2.75',  
33.     leaf: true  
34. }, child);