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。
通过上面的可以顺利实现动态列的添加效果。之前查过很多资料，都没有好的解决方案。所以中间走了很多弯路，效果都不理想。我们的张经理也帮了我很大忙，最后还是他发现的这个解决办法，简单、并且效果明显。再次感谢他对我工作的大力支持！
另外要感谢原文链接http://blog.csdn.net/dwj520/article/details/6308747的作者留下了宝贵的技术资料！