Extjs4 TreeGrid

本文介绍Extjs4 TreeGrid的使用，实例中的树实现了多表头、使用AJAX请求载入数据、排序，隐藏和显示表头等Grid中的功能。实例来自Extjs官方网站

本文介绍Extjs4 TreeGrid的使用，实例中的树实现了多表头、使用AJAX请求载入数据、排序，隐藏和显示表头等Grid中的功能。实例来自Extjs官方网站

HTML代码：

 

1. <div id="tree-example"></div>

JS代码：

 

1. Ext.require([
2.     'Ext.data.*',
3.     'Ext.grid.*',
4.     'Ext.tree.*'
5. ]);
7. Ext.onReady(function() {    
8.     //we want to setup a model and store instead of using dataUrl
9.     Ext.regModel('Task', {
10.         fields: [
11.             {name: 'task',     type: 'string'},
12.             {name: 'user',     type: 'string'},
13.             {name: 'duration', type: 'string'}
14.         ]
15.     });
16.     
17.     var store = new Ext.data.TreeStore({
18.         model: 'Task',
19.         proxy: {
20.             type: 'ajax',
21.             //the store will get the content from the .json file
22.             url: 'treegrid.json'
23.         },
24.         root: {
25.             expanded: true
26.         }
27.     });
28.     
29.     //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
30.     var tree = new Ext.tree.TreePanel({
31.         title: 'Core Team Projects',
32.         
33.         width: 500,
34.         height: 300,
35.         renderTo: Ext.getBody(),
37.         useArrows: true,
38.         rootVisible: false,
39.         
40.         store: store,
41.         
42.         //the 'columns' property is now 'headers'
43.         headers: [{
44.             xtype: 'treeheader', //this is so we know which column will show the tree
45.             text: 'Task',
46.             flex: 2,
47.             dataIndex: 'task'
48.         },{
49.             //we must use the templateheader component so we can use a custom tpl
50.             xtype: 'templateheader',
51.             text: 'Duration',
52.             flex: 1,
53.             dataIndex: 'duration',
54.             align: 'center',
55.             //add in the custom tpl for the rows
56.             tpl: new Ext.XTemplate('{duration:this.formatHours}', {
57.                 formatHours: function(v) {
58.                     if (v < 1) {
59.                         return Math.round(v * 60) + ' mins';
60.                     } else if (Math.floor(v) !== v) {
61.                         var min = v - Math.floor(v);
62.                         return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
63.                     } else {
64.                         return v + ' hour' + (v === 1 ? '' : 's');
65.                     }
66.                 }
67.             })
68.         },{
69.             text: 'Assigned To',
70.             flex: 1,
71.             dataIndex: 'user'
72.         }]
73.     });
74. });

实例使用JSON数据格式，要求返回类似如下格式的数据：

 

1. [{"text":".","children": [
2.     {
3.         task:'Project: Shopping',
4.         duration:13.25,
5.         user:'Tommy Maintz',
6.         iconCls:'task-folder',
7.         expanded: true,
8.         children:[{
9.             task:'Housewares',
10.             duration:1.25,
11.             user:'Tommy Maintz',
12.             iconCls:'task-folder',
13.             children:[{
14.                 task:'Kitchen supplies',
15.                 duration:0.25,
16.                 user:'Tommy Maintz',
17.                 leaf:true,
18.                 iconCls:'task'
19.             },{
20.                 task:'Groceries',
21.                 duration:.4,
22.                 user:'Tommy Maintz',
23.                 leaf:true,
24.                 iconCls:'task'
25.             },{
26.                 task:'Cleaning supplies',
27.                 duration:.4,
28.                 user:'Tommy Maintz',
29.                 leaf:true,
30.                 iconCls:'task'
31.             },{
32.                 task: 'Office supplies',
33.                 duration: .2,
34.                 user: 'Tommy Maintz',
35.                 leaf: true,
36.                 iconCls: 'task'
37.             }]
38.         }]
39.     }]
40. }]

实例链接：dev.sencha.com/deploy/ext-4.0-pr5/examples/tree/treegrid.html