Extjs 实现动态添加gridPanel的列和数据

最近几天在我们的.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。

 

转载于:https://www.cnblogs.com/loveok-56/archive/2011/11/25/2263447.html