ExtJS4学习笔记(十九)---TreeGrid

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

HTML代码：

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

JS代码：

1. Ext.require([
2. 'Ext.data.*',
3. 'Ext.grid.*',
4. 'Ext.tree.*'
5. ]);
6. 
   
7. Ext.onReady(function(){
8. //wewanttosetupamodelandstoreinsteadofusingdataUrl
9. Ext.regModel('Task',{
10. fields:[
11. {name:'task',type:'string'},
12. {name:'user',type:'string'},
13. {name:'duration',type:'string'}
14. ]
15. });
17. varstore=newExt.data.TreeStore({
18. model:'Task',
19. proxy:{
20. type:'ajax',
21. //thestorewillgetthecontentfromthe.jsonfile
22. url:'treegrid.json'
23. },
24. root:{
25. expanded:true
26. }
27. });
29. //Ext.ux.tree.TreeGridisnolongeraUx.Youcansimplyuseatree.TreePanel
30. vartree=newExt.tree.TreePanel({
31. title:'CoreTeamProjects',
33. width:500,
34. height:300,
35. renderTo:Ext.getBody(),
36. 
    
37. useArrows:true,
38. rootVisible:false,
40. store:store,
42. //the'columns'propertyisnow'headers'
43. headers:[{
44. xtype:'treeheader',//thisissoweknowwhichcolumnwillshowthetree
45. text:'Task',
46. flex:2,
47. dataIndex:'task'
48. },{
49. //wemustusethetemplateheadercomponentsowecanuseacustomtpl
50. xtype:'templateheader',
51. text:'Duration',
52. flex:1,
53. dataIndex:'duration',
54. align:'center',
55. //addinthecustomtplfortherows
56. tpl:newExt.XTemplate('{duration:this.formatHours}',{
57. formatHours:function(v){
58. if(v<1){
59. returnMath.round(v*60)+'mins';
60. }elseif(Math.floor(v)!==v){
61. varmin=v-Math.floor(v);
62. returnMath.floor(v)+'h'+Math.round(min*60)+'m';
63. }else{
64. returnv+'hour'+(v===1?'':'s');
65. }
66. }
67. })
68. },{
69. text:'AssignedTo',
70. flex:1,
71. dataIndex:'user'
72. }]
73. });
74. });

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

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