ext4中实现动态grid生成

ExtJS4可以实现gird表头,样式和数据 由后台传来的数据来动态展现,这样就实现了可以自由动态配置grid,实现方式如下:

1,编写以下extjs代码:

Ext.onReady(function(){   
       Ext.Ajax.request({   
           url: 'json.jsp',   
           params : {   
           action : "query"   
           },   
           method : 'POST',   
           success : function(response) {   
           var json = Ext.JSON.decode(response.responseText); //获得后台传递json   
      
           var store = Ext.create('Ext.data.Store', {   
           fields : json.fieldsNames,//把json的fieldsNames赋给fields   
           data : json.data          //把json的data赋给data   
           });    
           Ext.getCmp("configGrid").reconfigure(store, json.columModle);  //定义grid的store和column   
           Ext.getCmp("configGrid").render();   
           }   
           });   
           Ext.create("Ext.grid.Panel",{   
               id : 'configGrid',   
               name : 'configGrid',   
               columns : [],   
               displayInfo : true,   
               emptyMsg : "没有数据显示",   
               items : [],   
               renderTo:'grid'   
           });   
   })   

 

2,以上代码中Json.jsp数据如下:

<%@ page language="java" pageEncoding="GBK"%>
{'data':[{'统计':'销售收入','安徽':823731.0,'福建':1136375.0,'湖南':33700.0,'浙江':32760.0},{'统计':'销售数量','安徽':15218.0,'福建':21375.0,'湖南':600.0,'浙江':546.0}],'columModle':[{'header': '统计','dataIndex': '统计','width':80},{'header':'安徽','dataIndex':'安徽'},{'header':'福建','dataIndex':'福建'},{'header':'湖南','dataIndex':'湖南'},{'header':'浙江','dataIndex':'浙江'}],'fieldsNames':[{name: '统计'},{name: '安徽'},{name: '福建'},{name: '湖南'},{name: '浙江'}]}

 

 

运行代码,即可看到通过json数据来统计构造的gird.