Ext 构建gridtree的步骤

1. Ext 构建gridtree的步骤
2. 
   
3. Ext.require([  
4.     'Ext.data.*',  
5.     'Ext.grid.*',  
6.     'Ext.tree.*'  
7. ]);  
8.   
9. Ext.onReady(function() {  
10.     //we want to setup a model and store instead of using dataUrl  
11.     Ext.define('strSiteName', {  
12.         extend: 'Ext.data.Model',  
13.         fields: [  
14.              
15.             {name: 'strSiteName',     type: 'string'},  
16.             {name: 'flaSiteScore', type: 'double'},  
17.             {name: 'flaInfoDisclosureScore',     type: 'double'},  
18.             {name: 'flaOnlineServicesScore',     type: 'double'},  
19.             {name: 'flaPublicParticipationSore', type: 'double'},  
20.             {name: 'flaWebDesignScore', type: 'double'},  
21.             {name: 'flaDailyScore', type: 'double'}          
22.                       
23.         ]  
24.     });  
25.           
26.     var store = Ext.create('Ext.data.TreeStore', {  
27.         model: 'strSiteName',  
28.         proxy: {  
29.             type: 'ajax',  
30.             //the store will get the content from the .json file  
31.             url: 'treegrid.json'  
32.         },  
33.         folderSort: true  
34.     });  
35.   
36.     //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel  
37.     var tree = Ext.create('Ext.tree.Panel', {  
38.         title: 'Duration',  
39.         width: 800,  
40.         height: 300,  
41.         renderTo: Ext.getBody(),  
42.         collapsible: true,  
43.         useArrows: true,  
44.         rootVisible: false,  
45.         store: store,  
46.         multiSelect: true,  
47.         singleExpand: false,  
48.         //the 'columns' property is now 'headers'  
49.         columns: [{  
50.             xtype: 'treecolumn', //this is so we know which column will show the tree  
51.             text: '网站名称',  
52.             flex: 8,  
53.               
54.             sortable: true,  
55.             dataIndex: 'strSiteName'  
56.         },{  
57.               
58.             text: '总分',  
59.             flex: 5,  
60.             sortable: true,  
61.             dataIndex: 'flaSiteScore'  
62.         },{  
63.               
64.             text: '公开',  
65.             flex: 5,  
66.             sortable: true,  
67.             dataIndex: 'flaInfoDisclosureScore'  
68.         },{  
69.               
70.             text: '在线办事',  
71.             flex: 5,  
72.             sortable: true,  
73.             dataIndex: 'flaOnlineServicesScore'  
74.         },{  
75.               
76.             text: '公众参与',  
77.             flex: 5,  
78.             sortable: true,  
79.             dataIndex: 'flaPublicParticipationSore'  
80.         },{  
81.               
82.             text: '网站性能及设计',  
83.             flex: 5,  
84.             sortable: true,  
85.             dataIndex: 'flaWebDesignScore'  
86.         },{  
87.               
88.             text: '日常保障',  
89.             flex: 5,  
90.             sortable: true,  
91.             dataIndex: 'flaDailyScore'  
92.         }   ]  
93.     });  
94. });