Ext js 4 动态Grid(包括动态列和动态数据)

版本:Ext 4.2

上网查了好多,都是老版本的,无奈看api加调试终于弄出来了

//1先定义一个面板
ValuePanel = new Ext.grid.GridPanel({
    xtype: 'grid',// 关键属性
    // 写其他属性 store,columns可写可不写
});
//2,定义store 以及 store的数据结构
var NewStore = new Ext.data.ArrayStore({
    model: 'NewStoreModel',// 下方定义的model
    proxy: {
        type: 'ajax',
        url: '/getsomething',// 后台获取数据的地址
        reader: {
            type: 'json'
        }
    }
});
// 可以留一些初始化数据
var NewColumns = [{ text: '名称', dataIndex: 'FS_NAME' },
　　                { text: '层位', dataIndex: 'FS_POSITION' }];
　　
var NewModelFields = [{ name: 'FS_NAME' }, { name: 'FS_POSITION' }];
　　
Ext.define('NewStoreModel', {
    extend: 'Ext.data.Model',
    fields: NewModelFields 
});
//3,写一个动态刷新数据的方法(js)
function SearchData() {
    // 添加的列的dataIndex要和Fields的name一致,
    // 而name就是后台返回的数据中的name
    NewColumns .push({ text: '年份', dataIndex: 'FI_YEAR' });
    NewModelFields .push({ name: 'FI_YEAR' });
         
    // 这一步很关键:重新绑定NewStoreModel的Fields
    NewStoreModel.setFields(NewModelFields );

    // 开始读取数据
    NewStore.load();
}
// NewStore装载完数据后执行的动作
NewStore.on('load', function () {
    // 调用Panel的方法进行刷新数据表,参数是store,columns对象
    ValuePanel.reconfigure(NewStore , NewColumns );
});