最近幾天在我們的.net專案中有一個單據要實現根據使用者選擇條件動態新增gridPanel的對應列和資料。

以前的頁面及資料實現是在頁面上直接顯示gridPanel控制元件，並對應一個store。資料則在cs中賦值。這次則改在js中建立gridPanel物件，render到頁面。store用jsonReader，所以資料格式應為json的。

大致步驟是:頁面通過js請求到handler，獲取資料(json)。在js接收資料後建立gridPanel和store並賦值。最後顯示到頁面。

具體實現：從handler說起，在handler中不僅要獲取顯示的資料。還要獲取gridPanel的列(colName)和store的field(fieldNames)。程式碼如下：

1 fieldNames += ",{name:'" + ProviderNameS[i] + "'}";
2 colName += ",{'header':'" + ProviderNameS[i] + "','dataIndex': '" + ProviderNameS[i] + "','align':'center'}";

我們需要把fieldNames和colName封裝成json格式的字串。'ProviderNameS[i]'是要顯示的列名和store對應的field名字。                                                                                                                                                                                                                                                                                                             

然後在js中接收建立gridPanel和store物件。程式碼如下：

 1 function setStore(msg) {
 2     if (Ext.getCmp("GridPanel1") != undefined) {
 3         Ext.getCmp("GridPanel1").destroy();
 4     }
 5     if (Ext.getCmp("Store1") != undefined) {
 6         Ext.getCmp("Store1").remove();
 7     }
 8     var store = new Ext.data.JsonStore({
 9
 
         id: "Store1",
10         data: msg.data,
11         fields: msg.fieldNames
12     });
13 
14     var cm = new Ext.grid.ColumnModel(msg.colName);
15     var grid = new Ext.grid.GridPanel({
16         id: "GridPanel1",
17         height: 240,
18         width: 750,
19         region: 'center',
20         autoScroll: true,
21         split: true,
22         border: false,
23         cm: cm,
24         ds: store
25     });
26     grid.render("Panel7_Content");
27 }

msg是從接收到的資料。

第10行:data:msg.data給store的data賦值。這是要顯示的資料。

第11行:fields:msg.fieldNames 給store的fields賦值，就是在handler中已經定義的。這個要和gridPanel列的dataIndex值對應才能顯示資料。

第14行:建立gridPanel的columnModel物件

第23、24行:就是賦值了。

第26行:把gridPanel render到頁面的一個panel中。

第2-7行:是把上次已經生成的gridPanel和store銷燬，否則頁面上每次都會生成一個gridPanel。

通過上面的可以順利實現動態列的新增效果。之前查過很多資料，都沒有好的解決方案。所以中間走了很多彎路，效果都不理想。我們的張經理也幫了我很大忙，最後還是他發現的這個解決辦法，簡單、並且效果明顯。再次感謝他對我工作的大力支援！