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