自由动态配置grid 表头,样式和数据

最新推荐文章于 2018-11-05 16:12:06 发布

mengzhengjie

最新推荐文章于 2018-11-05 16:12:06 发布

阅读量1.7k

点赞数

分类专栏： Ext

Ext 专栏收录该内容

81 篇文章 1 订阅

订阅专栏

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.