Extjs3 动态生成grid

由于业务需要，grid列不确定的情况下，动态生成列及添加数据。 
基本流程是grid列的数据从后台先取得，然后填充列数据。 
代码片段如下： 

Js代码  

1. // 明细标题信息  
2. var cmItems = [];  
3. // 明细标题信息列model  
4. var cm = new Ext.grid.ColumnModel(cmItems);  
5. // 明细record信息  
6. var cmRecord = [];  
7. Ext.Ajax.request({  
8.     url: 'xxxx/xxxxxxTitle',  
9.     method: 'post',  
10.     success: function(response, options){  
11.         var cmtitle = [];  
12.         var cmConfig = {};  
13.         cmtitle = Ext.util.JSON.decode(response.responseText);  
14.         // rowid  
15.         cmConfig = new Ext.grid.RowNumberer()  
16.         cmItems.push(cmConfig);  
17.         // 商品属性  
18.         cmConfig = {  
19.             header: '商品属性',  
20.             dataIndex: 'baccy_attribute',  
21.             width: 100,  
22.             sortable: true  
23.         };  
24.         cmItems.push(cmConfig);  
25.         cmConfig = {  
26.             name: 'baccy_attribute',  
27.             type: 'string',  
28.             mapping: 'baccy_attribute'  
29.         };  
30.         cmRecord.push(cmConfig);  
31.         // 商品编码  
32.         cmConfig = {  
33.             header: '商品编码',  
34.             dataIndex: 'baccy_v3_code',  
35.             width: 100,  
36.             sortable: true  
37.         };  
38.         cmItems.push(cmConfig);  
39.         cmConfig = {  
40.             name: 'baccy_v3_code',  
41.             type: 'string',  
42.             mapping: 'baccy_v3_code'  
43.         };  
44.         cmRecord.push(cmConfig);  
45.         // 商品名称  
46.         cmConfig = {  
47.             header: '商品名称',  
48.             dataIndex: 'baccy_name',  
49.             width: 200,  
50.             sortable: true  
51.         };  
52.         cmItems.push(cmConfig);  
53.         cmConfig = {  
54.             name: 'baccy_name',  
55.             type: 'string',  
56.             mapping: 'baccy_name'  
57.         };  
58.         cmRecord.push(cmConfig);  
59.         //动态添加头信息***************************  
60.         for (var i = 0; i < cmtitle.length; i++) {  
61.             cmConfig = {  
62.                 header: cmtitle[i].data,  
63.                 dataIndex: cmtitle[i].column,  
64.                 width: 120,  
65.                 sortable: true  
66.             };  
67.             cmItems.push(cmConfig);  
68.             cmConfig = {  
69.                 name: cmtitle[i].column,  
70.                 type: 'string',  
71.                 mapping: cmtitle[i].column  
72.             };  
73.             cmRecord.push(cmConfig);  
74.         }  
75.         // id  
76.         cmConfig = {  
77.             name: 'goodsupplyId',  
78.             type: 'string',  
79.             mapping: 'goodsupplyId'  
80.         };  
81.         cmRecord.push(cmConfig);  
82.         cm = new Ext.grid.ColumnModel(cmItems);  
83.         //1.定义明细信息数据结构。  
84.         var list_StudentRecord = Ext.data.Record.create(cmRecord);  
85.         //按列排序。  
86.         cm.defaultSortable = true;  
87.         //2.定义明细list数据结构。  
88.         var list_store = new Ext.data.Store({  
89.             name: 'list_store',  
90.             //设置服务器端映射。传入id作为查询条件。  
91.             proxy: new Ext.data.HttpProxy({  
92.                 autoLoad: true,  
93.                 url: 'xxxx/xxxxxList'  
94.             }),  
95.             //autoLoad如果有值传入，那么store的load会自动调用，发生在autoLoaded对象创建之后  
96.             //定义数据结构  
97.             reader: new Ext.data.JsonReader({  
98.                 totalProperty: 'totalProperty',  
99.                 root: 'root'  
100.             }, list_StudentRecord),  
101.             remoteSort: false //True要求服务器提供一个更新版本的数据对象以便排序，反之就是在Record缓存中排序（默认是false）。  
102.         });  
103.           
104.         //3.定义货源明细信息Grid。  
105.         var list_grid = new Ext.grid.GridPanel({  
106.             id: 'list_grid',  
107.             store: list_store,  
108.             region: 'center',  
109.             loadMask: true,  
110.             height: document.body.clientHeight - 80,  
111.             cm: cm,  
112.             //定义底部信息bar  
113.             bbar: new Ext.PagingToolbar({  
114.                 pageSize: 999,  
115.                 store: list_store,  
116.                 displayInfo: true  
117.             })  
118.         });  
119.         //4画面load之前给变量赋值  
120.         list_store.on('beforeload', function(){  
121.             Ext.apply(this.baseParams, {  
122.                 start: 0,  
123.                 limit: 999,  
124.                 goodsupplyId: baccy_provide_id  
125.             });  
126.         });  
127.         //5.定义明细信息Form。  
128.         var list_form = new Ext.form.FormPanel({  
129.             id: 'list_form',  
130.             labelAlign: 'center',  
131.             frame: true,  
132.             defaultType: 'textfield',  
133.             width: document.body.clientWidth,  
134.             height: document.body.clientHeight - 30,  
135.             items: [list_grid]  
136.         });  
137.         //6.定义明细查询窗口。  
138.         var list_win = new Ext.Window({  
139.             id: 'list-win',  
140.             modal: true, // 模态窗口  
141.             el: 'list-win',  
142.             layout: 'fit',  
143.               
144.             width: document.body.clientWidth,  
145.             height: document.body.clientHeight,  
146.             title: '显示明细信息',  
147.             closeAction: 'hide',  
148.             items: [list_form],  
149.             buttons: [{  
150.                 text: '返回',  
151.                 iconCls: 'goBack',  
152.                 ref: '../gpBackButton',  
153.                 handler: function(){  
154.                     list_win.hide();  
155.                     list_form.getForm().reset();  
156.                 }  
157.             }],  
158.             listeners: {  
159.                 'show': function(){  
160.                     //window宽和高设定  
161.                     Ext.getCmp('list-win').setWidth(document.body.clientWidth);  
162.                     Ext.getCmp('list-win').setHeight(document.body.clientHeight);  
163.                     //form宽和高设定  
164.                     Ext.getCmp('list_form').setWidth(document.body.clientWidth);  
165.                     Ext.getCmp('list_form').setHeight(document.body.clientHeight - 30);  
166.                     //grid高设定  
167.                     Ext.getCmp('list_grid').setHeight(document.body.clientHeight - 80);  
168.                 }  
169.             }  
170.         });  
171.     },  
172.     // 取得货源明细标题信息失败方法。  
173.     failure: function(){  
174.     }  
175. });  

后台请求title返回grid头列表，请求list返回和头相对应的列表。