Extjs4动态添加grid中的column

有如下Grid以及Model:

Ext.define(‘Engine_report_model‘, {
    extend: ‘Ext.data.Model‘,
    fields: [{
        name: ‘botname‘,
        type: ‘string‘,
    }, {
        name: ‘epoch_us‘,
        type: ‘string‘,
    }],
};

var grid = Ext.create(‘Ext.data.Store‘, {
    storeId: ‘engine_report_store‘,
    model: ‘Engine_report_model‘,
    autoLoad: true,
    sortOnFilter: false,
    proxy: {
        type: ‘ajax‘,
        url: ‘/api/engine‘,
        reader: {
            type: ‘json‘,
            root: ‘datas‘
        },
    },
});

在某些场景下需要动态的添加grid中的column(这些column的数据是服务端返回的), 那么应该怎么做呢?

其实方法也比较简单, 主要是修改两个地方:

1. model对应的field

2. grid对应的column

代码片段如下:

function init_engine_report() {
    Ext.Ajax.request({
        url: ‘/api/engine‘,
        method: ‘GET‘,
        success: function(response) {
            var v = Ext.JSON.decode(response.responseText);
            var dials_info = v[‘dials‘];
            var dials_name = dials_info[‘dials_name‘];
            var column = create_engine_report_column(); //这里是创建grid的column的

            //动态修改model的field和grid的column
            for (var i = 0; i < dials_name.length; i++) {
                var name = dials_name[i];
                //field
                Engine_report_model.prototype.fields.add({
                    name: name,
                    type: ‘string‘
                });

                //column
                column.items.splice(column.items.length - 3, 0, {
                    header: name,
                    width: 65,
                    dataIndex: name,
                    align: ‘right‘,
                    editor: {
                        xtype: ‘numberfield‘,
                        allowBlank: true,
                    }
                });
            }

            var datas = v[‘datas‘];
            init_bot(column);
            init_bot();
        },
        failure: function(response) {
            var v = Ext.JSON.decode(response.responseText);
            Ext.Msg.alert(v[‘error‘]);
        }
    });
};

Extjs4动态添加grid中的column,古老的榕树,5-wow.com