Extjs3 动态生成grid

由于业务需要,grid列不确定的情况下,动态生成列及添加数据。
基本流程是grid列的数据从后台先取得,然后填充列数据。
代码片段如下:
// 明细标题信息
var cmItems = [];
// 明细标题信息列model
var cm = new Ext.grid.ColumnModel(cmItems);
// 明细record信息
var cmRecord = [];
Ext.Ajax.request({
    url: 'xxxx/xxxxxxTitle',
    method: 'post',
    success: function(response, options){
        var cmtitle = [];
        var cmConfig = {};
        cmtitle = Ext.util.JSON.decode(response.responseText);
        // rowid
        cmConfig = new Ext.grid.RowNumberer()
        cmItems.push(cmConfig);
        // 商品属性
        cmConfig = {
            header: '商品属性',
            dataIndex: 'baccy_attribute',
            width: 100,
            sortable: true
        };
        cmItems.push(cmConfig);
        cmConfig = {
            name: 'baccy_attribute',
            type: 'string',
            mapping: 'baccy_attribute'
        };
        cmRecord.push(cmConfig);
        // 商品编码
        cmConfig = {
            header: '商品编码',
            dataIndex: 'baccy_v3_code',
            width: 100,
            sortable: true
        };
        cmItems.push(cmConfig);
        cmConfig = {
            name: 'baccy_v3_code',
            type: 'string',
            mapping: 'baccy_v3_code'
        };
        cmRecord.push(cmConfig);
        // 商品名称
        cmConfig = {
            header: '商品名称',
            dataIndex: 'baccy_name',
            width: 200,
            sortable: true
        };
        cmItems.push(cmConfig);
        cmConfig = {
            name: 'baccy_name',
            type: 'string',
            mapping: 'baccy_name'
        };
        cmRecord.push(cmConfig);
        //动态添加头信息***************************
        for (var i = 0; i < cmtitle.length; i++) {
            cmConfig = {
                header: cmtitle[i].data,
                dataIndex: cmtitle[i].column,
                width: 120,
                sortable: true
            };
            cmItems.push(cmConfig);
            cmConfig = {
                name: cmtitle[i].column,
                type: 'string',
                mapping: cmtitle[i].column
            };
            cmRecord.push(cmConfig);
        }        
        // id
        cmConfig = {
            name: 'goodsupplyId',
            type: 'string',
            mapping: 'goodsupplyId'
        };
        cmRecord.push(cmConfig);
        cm = new Ext.grid.ColumnModel(cmItems);
        //1.定义明细信息数据结构。
        var list_StudentRecord = Ext.data.Record.create(cmRecord);
        //按列排序。
        cm.defaultSortable = true;
        //2.定义明细list数据结构。
        var list_store = new Ext.data.Store({
            name: 'list_store',
            //设置服务器端映射。传入id作为查询条件。
            proxy: new Ext.data.HttpProxy({
                autoLoad: true,
                url: 'xxxx/xxxxxList'
            }),
            //autoLoad如果有值传入,那么store的load会自动调用,发生在autoLoaded对象创建之后
            //定义数据结构
            reader: new Ext.data.JsonReader({
                totalProperty: 'totalProperty',
                root: 'root'
            }, list_StudentRecord),
            remoteSort: false //True要求服务器提供一个更新版本的数据对象以便排序,反之就是在Record缓存中排序(默认是false)。
        });
        
        //3.定义货源明细信息Grid。
        var list_grid = new Ext.grid.GridPanel({
            id: 'list_grid',
            store: list_store,
            region: 'center',
            loadMask: true,
            height: document.body.clientHeight - 80,
            cm: cm,
            //定义底部信息bar
            bbar: new Ext.PagingToolbar({
                pageSize: 999,
                store: list_store,
                displayInfo: true
            })
        });
        //4画面load之前给变量赋值
        list_store.on('beforeload', function(){
            Ext.apply(this.baseParams, {
                start: 0,
                limit: 999,
                goodsupplyId: baccy_provide_id
            });
        });
        //5.定义明细信息Form。
        var list_form = new Ext.form.FormPanel({
            id: 'list_form',
            labelAlign: 'center',
            frame: true,
            defaultType: 'textfield',
            width: document.body.clientWidth,
            height: document.body.clientHeight - 30,
            items: [list_grid]
        });
        //6.定义明细查询窗口。
        var list_win = new Ext.Window({
            id: 'list-win',
            modal: true, // 模态窗口
            el: 'list-win',
            layout: 'fit',
            
            width: document.body.clientWidth,
            height: document.body.clientHeight,
            title: '显示明细信息',
            closeAction: 'hide',
            items: [list_form],
            buttons: [{
                text: '返回',
                iconCls: 'goBack',
                ref: '../gpBackButton',
                handler: function(){
                    list_win.hide();
                    list_form.getForm().reset();
                }
            }],
            listeners: {
                'show': function(){
                    //window宽和高设定
                    Ext.getCmp('list-win').setWidth(document.body.clientWidth);
                    Ext.getCmp('list-win').setHeight(document.body.clientHeight);
                    //form宽和高设定
                    Ext.getCmp('list_form').setWidth(document.body.clientWidth);
                    Ext.getCmp('list_form').setHeight(document.body.clientHeight - 30);
                    //grid高设定
                    Ext.getCmp('list_grid').setHeight(document.body.clientHeight - 80);
                }
            }
        });
    },
    // 取得货源明细标题信息失败方法。
    failure: function(){
    }
});

后台请求title返回grid头列表,请求list返回和头相对应的列表。
小宝制造。

你可能感兴趣的:(ExtJs,grid,动态生成)