ExtJS4 动态添加列的两种方式
1、在数据加载完成后添加
for(var key in data) {
var value = data[key];
var column = Ext.create('Ext.grid.column.Column', {
text: value,
width:60,
style: "text-align:center;",
align:'center',
dataIndex: key
});
grid.headerCt.insert(grid.columns.length, column);
}
grid.getView().refresh();2、grid在数据加载完成后创建
参考：http://www.cnblogs.com/doublog/archive/2009/07/14/1523682.html
数据：
1: "{columModle:[{header:\"用电单位\",dataIndex:\"用电单位\"},
2: {header:\"2009-06 _度数\",dataIndex:\"2009-06 _度数\"},
3: {header:\"2009-06 _单价\",dataIndex:\"2009-06 _单价\"},
4: {header:\"2009-06 _金额\",dataIndex:\"2009-06 _金额\"},
5: {header:\"2009-07 _度数\",dataIndex:\"2009-07 _度数\"},
6: {header:\"2009-07 _单价\",dataIndex:\"2009-07 _单价\"},
7: {header:\"2009-07 _金额\",dataIndex:\"2009-07 _金额\"},
8: {header:\"2009-08 _度数\",dataIndex:\"2009-08 _度数\"},
9: {header:\"2009-08 _单价\",dataIndex:\"2009-08 _单价\"},
10: {header:\"2009-08 _金额\",dataIndex:\"2009-08 _金额\"},
11: {header:\"合计_度数\",dataIndex:\"合计_度数\"},
12: {header:\"合计_金额\",dataIndex:\"合计_金额\"}],
13: fieldsNames:[{name:\"用电单位\"},{name:\"2009-06 _度数\"},{name:\"2009-06 _单价\"},{name:\"2009-06 _金额\"},{name:\"2009-07 _度数\"},
14: {name:\"2009-07 _单价\"},{name:\"2009-07 _金额\"},{name:\"2009-08 _度数\"},{name:\"2009-08 _单价\"},{name:\"2009-08 _金额\"},
15: {name:\"合计_度数\"},{name:\"合计_金额\"}],
16: data:[{\"用电单位\":\"1\",\"2009-06 _度数\":\"\",\"2009-06 _单价\":\"\",\"2009-06 _金额\":\"\",\"2009-07 _度数\":\"1.00\",\"2009-07 _单价\":\"2.00\",\"2009-07 _金额\":\"2.0000\",\"2009-08 _度数\":\"4.00\",\"2009-08 _单价\":\"2.00\",\"2009-08 _金额\":\"8.0000\",\"合计_度数\":\"5.00\",\"合计_金额\":\"10.0000\"}]}"
JS
1: Ext.onReady(function() {
2: var conn = new Ext.data.Connection();
3: conn.request({ url: '/Power/PowerStatList', callback: function(options, success, response) {
4: var a = response.responseText;
5: var json = new Ext.util.JSON.decode(eval(a));
6: var jsonrows = "[[";
7: var rows = {};
8: var _temp = [];
9: for (var item in json.columModle) {
10: if (item >= 0) {
11: var tempHeader = json.columModle[item].header
12: if (tempHeader.split('_').length > 1) {
13: _temp.push(tempHeader.split('_')[0]);
14: json.columModle[item].header = tempHeader.split('_')[1];
15: }
16: else
17: _temp.push("");
18: }
19: }
20: var i = 1;
21: for (var item in _temp) {
22: if (item >= 0) {
23: if (_temp[item] != _temp[Number(item) + 1]) {
24: jsonrows += "{header:'" + _temp[item] + "',colspan:" + i + ",align:'center'},";
25: i = 1;
26: }
27: else {
28: i++;
29: }
30: }
31: }
32: jsonrows = jsonrows.substring(0, jsonrows.length - 1);
33: jsonrows += "]]";
34: var cm = new Ext.grid.ColumnModel({ columns: json.columModle,
35: rows: new Ext.util.JSON.decode(jsonrows)
36: });
37: var ds = new Ext.data.JsonStore({
38: data: json.data,
39: fields: json.fieldsNames
40: });
41: var grid = new Ext.grid.EditorGridPanel({
42: height: 400,
43: region: 'center',
44: split: true,
45: border: false,
46: store: ds,
47: plugins: [new Ext.ux.plugins.GroupHeaderGrid()],
48: cm: cm
49: });
50: grid.render('grid-example');
51: }
52: });
53: });