ExtJs动态grid的生成

最近经常碰到这样一种情况，事先并不知道grid中每一列的信息，也就是不知道 grid 的ColumnModel中的相信信息，需要经过后台才能获取所有列的信息，此时就需要用到grid列的动态生成。

目前只研究了两种方式的动态grid生成方法，下面附上方法。

第一种方法：

需要导入一个插件，AutoGrid.js，在网上都可以下载到，附件也上传了。
   
前台代码如下

var grid = new Ext.ux.AutoGridPanel({
      title:'动态grid',
      renderTo: 'w',
      height: 300,
      width: 1200,
      loadMask: true,                  
      store : new Ext.data.Store({
      proxy: new Ext.data.HttpProxy({url:"../ReceivableAccountServlet"}),
      reader: new Ext.data.JsonReader()
      })
});
grid.store.load({params: {meta: true}});    

后台返回的JSON字符串格式如下

{"metaData":{"root":"rows","id":0,
"fields":[{"name":"employee_id","header":"雇员ID"},
{"name":"employee_name","header":"姓名"},
{"name":"receivable_month","header":"应收年月"},
{"name":"name0","header":"产品1"},
{"name":"name1","header":"产品2"},
{"name":"name2","header":"产品3"}]},"
rows":[{"employee_id":3,"employee_name":"张三","receivable_month":201010,"name0":33,"name1":11,"name2":22}]}

第一种方法只能做动态grid的显示操作，并不能对Gird进行编辑保存等操作。下面介绍第二种方法

还是先贴前台代码吧

 Ext.onReady(function(){
 
 Ext.Ajax.request({
 	    url:"../ReceivableAccountServlet",
    	params:{bill_version_id:bill_version_id},
    	success:function(response,config){
          json=Ext.util.JSON.decode(response.responseText);
          var cm = new Ext.grid.ColumnModel(json.columModel);	
		  var store = new Ext.data.JsonStore({
		  data:json.data,
		  fields:json.fieldsNames
		  });

 		  var grid = new Ext.grid.EditorGridPanel({
                title:'账单明细',
                region: 'center',
	            split: true,
                renderTo: 'w',
                height: 300,
                width: 1200,
                cm:cm,
                store:store
            });
        },
       failure:function(){
     		
     	}
});
});

后台传回的JSON字符串如下

  {'action':true,'message':'error!',
  'data':[
  {'number':'1','text1': '3','info1': '4','special1': '5'}
  ],
  'columModle':[
  {'header': '序号','dataIndex': 'number','width':40},
  {'header': '编码','dataIndex': 'text1',editor:new Ext.grid.GridEditor(new Ext.form.NumberField())},
  {'header': '名称','dataIndex': 'info1'},
  {'header': '金额','dataIndex': 'special1'}
  ],
  'fieldsNames':[{name:'number'},{name:'text1'},{name:'info1'},{name:'special1'}]
  }

此种方法是我最喜欢用的，功能强大。。。

其实不管你是哪一种grid,最重要的还是数据的对应关系。只要明确如何去解析JSON字符串，一切都很简单，万变不离其宗！