ExtJS4学习笔记十一 树控件的使用

一、树面板简单示例 

Javascript代码  

1. var tree = Ext.create('Ext.tree.Panel', {  
2.     title: '树面板简单示例',  
3.     width : 150,  
4.     height : 100,  
5.     renderTo: Ext.getBody(),  
6.     root: {  
7.         text: '树根',//节点名称  
8.         expanded: true,//默认展开根节点  
9.         children: [{  
10.             text: '节点一',//节点名称  
11.             leaf: true//true说明为叶子节点  
12.         }, {  
13.             text: '节点二',//节点名称  
14.             leaf: true//true说明为叶子节点  
15.         }]  
16.     }  
17. });  

二、多列树示例 

Javascript代码  

1. var tree = Ext.create('Ext.tree.Panel', {  
2.     title: 'TreeGrid（多列树示例）',  
3.     renderTo: Ext.getBody(),  
4.     width : 200,  
5.     height : 120,  
6.     fields: ['name', 'description'],  
7.     columns: [{  
8.         xtype: 'treecolumn',//树状表格列  
9.         text: '名称',  
10.         dataIndex: 'name',  
11.         width: 100,  
12.         sortable: true  
13.     }, {  
14.         text: '描述',  
15.         dataIndex: 'description',  
16.         flex: 1,  
17.         sortable: true  
18.     }],  
19.     root: {  
20.         name: '树根',  
21.         description: '树根的描述',  
22.         expanded: true,  
23.         children: [{  
24.             name: '节点一',  
25.             description: '节点一的描述',  
26.             leaf: true  
27.         }, {  
28.             name: '节点二',  
29.             description: '节点二的描述',  
30.             leaf: true  
31.         }]  
32.     }  
33. });  

三、树面板中的复选框示例 

Javascript代码  

1. var tree = Ext.create('Ext.tree.Panel', {  
2.     title: '复选框示例',  
3.     width : 150,  
4.     height : 100,  
5.     renderTo: Ext.getBody(),  
6.     root: {  
7.         text: '树根',//节点名称  
8.         expanded: true,//默认展开根节点  
9.         children: [{  
10.             text: '节点一',//节点名称  
11.             checked : true,//默认选中  
12.             leaf: true//true说明为叶子节点  
13.         }, {  
14.             text: '节点二',//节点名称  
15.             checked : false,//默认不选中  
16.             leaf: true//true说明为叶子节点  
17.         }]  
18.     }  
19. });