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:      });