Ext 动态添加grid 列数

最新推荐文章于 2022-08-30 10:59:57 发布

转载最新推荐文章于 2022-08-30 10:59:57 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/winner/archive/2008/08/02/1258965.html

文章标签：

#json #数据库

本文介绍如何使用ExtJS动态地调整Grid组件的列数。通过从后端获取JSON数据来定义列模型和数据模型，实现了动态展示表格内容的功能。

Ext 动态添加grid 列数

在做报表的时候，需要将grid的列数做成活的，列数有数据库里的字段确定，这据需要将grid的列数做成动态的，经过多次实验已成，如下：

后台返回的json:

                {'action':true,'message':'error!','data':[
                {'number':'1','text1': '3','info1': '4','special1': '5'}
                ],'columModle':[
                {'header': '序号','dataIndex': 'number','width':40},
                {'header': '编码','dataIndex': 'text1'},
                {'header': '名称','dataIndex': 'info1'},
                {'header': '金额','dataIndex': 'special1'}
                ],'fieldsNames':[{name: 'number'},
                {name: 'text1'}, {name: 'info1'},
                {name: 'special1'}]}

            var cm = new Ext.grid.ColumnModel(json.columModle);
            var ds = new Ext.data.JsonStore({
            data:json.data,
            fields:json.fieldsNames
            });

            var grid = new Ext.grid.GridPanel({
            region: 'center',
            split: true,
            border:false,
            cm:cm,
            ds:ds
            });
            grid.render(document.body);

            new Ext.Viewport({
              layout: 'border',
              split: true,
              items: [grid]
            });

转载于:https://www.cnblogs.com/winner/archive/2008/08/02/1258965.html