ExtJs 4.0 動態生成Grid

 

每寫一篇文章都是一部血淚史啊。最近公司的需求要是使用到Ext的動態生成Grid，公司用的是4.0，因爲版本問題在網上找了不少都不實用，因此本身研究了下。

如今給你們分享出來。

後臺Json:

callback內容：

 1 callback : function(options, success, response) {
 2                              alert(response.responseText);
 3                             var r = Ext.decode(response.responseText);
 4                                if ("3"==r.state) {
 5                                     var columnModel = [];
 6                                     var columns = [];
 7                                     for(var i=0;i<r.responseResult.columnList.length;i++){//由於後臺返回的類型爲字符串，要將字符串轉換成Object  8                                         var v = r.responseResult.columnList[i];
 9                                         var obj = new Object();
10                                         obj = {text:v,dataIndex:v,width:120};
11                                         columnModel[i]=obj;
12                                         columns[i] = v;
13                                     }
14                                     
15                                     var datas = [];
16                                     for(var i=0;i<r.responseResult.dataList.length;i++){//轉換成Object 17                                         var v = r.responseResult.dataList[i];
18                                         var sp = v.split(",");
19                                         var objData = new Object();
20                                         for(var j=0;j<sp.length;j++){
21                                             var columnName = sp[j].substring(0,sp[j].indexOf(":"));
22                                             var columnData = sp[j].substring(sp[j].indexOf(":")+1,sp[j].length);
23                                             objData[columnName] = columnData;
24                                         }
25                                         datas[i]=objData;
26                                     }
27                                     var store = Ext.create('Ext.data.Store', {
28                                         fields : columns,
29                                         data:datas
30                                     });
31                                     //注意columns和columnModel必須爲數組形式的Object，若是是數組形式的字符串會報錯！
32                                     Ext.getCmp("syDataSourceGird").reconfigure(store,columnModel);  
33                                     return ;
34                                }  
35                                Ext.create('global.RespWin', {stateOkText : r.msg}).stateError();
36                           }