Extjs 根据store动态增加列

项目中需求：

grid表格中有三列为固定格式：

日期、机构、币种

其余的根据已选择的指标进行查询将列信息动态加载：

显示结果：

红色框内为固定列、绿色为动态增加的列

代码：

点击查询的时候加加载结果显示的store

查询需要加载的columns的

listeners: {
    search: function (form, data) {
        data.indexIds=this.up('panel').down('panel'[name='indexFormula']).indexIds;
        data.groupId = _condForm.groupId;

        _resultPanel.load(data)
        Ext.Ajax.request({//获取需要增加的列信息
            url: webapp + "/pageQueryIndexColumn.ajax",
            async: false,
            params:data,
            success: function (response) {
                var resultData = Ext.decode(response.responseText).result;
                var fields = ['ORGANIZATION','DATA_DATE','CURRENCY'];
               for(var i=0;i<resultData.length;i++){
                  cols.push(resultData[i]);
                   fields.push(resultData[i].dataIndex);
               }
                var model = form.up('panel').down('grid').store.model;
                model.setFields(fields,null,null);
                form.up('panel').down('grid').reconfigure(form.up('panel').down('grid').store, cols);


            }
        })
    }
}

结果展示的grid定义：只有三个列为固定的

var cols = [{
    header: '机构',
    dataIndex: 'ORGANIZATION',
    align: 'center',
    flex: 1
}, {
    header: '日期',
    align: 'center',
    dataIndex: 'DATA_DATE',
    flex: 1
}, {
    header: '币种',
    align: 'center',
    dataIndex: 'CURRENCY',
    flex: 1
}];

 var _resultPanel = Ext.create('Ext.common.ui.ResultGrid', {
     title: '结果显示',
     region: 'center',
     url: webapp + "/pageQueryIndexValueNew.ajax",
     hasCheckModel: false,
     columns: cols
 });

_resultPanel.load(data);//为结果显示的grid，自己封装的会查询store

resultData 为查询column返回的结果

遍历resultData

cols.push(resultData[i]) 将每个字段放到cols中

同时fileds需要增加resultData[i].dataIndex

注意：由于通过。。。.store.model.getFields()获取的fileds格式为：

如果通过push进去结果为

所以需要通过原生的方法进行赋值

fields为：store查询数据的字段数组

model.setFields({},null,null) 注：此方法第一个参数为数组，需要将固定的三列的dataIndex放到数组中，遍历时再将新的columns中的resultData[i].dataIndex push到数组中

最后通过grid.reconfigure(store,cols) 将grid重新进行绑定

成功！

最后显示的结果未进行处理，CNY应该显示为人民币，01，02应该显示为中文。

就这样！后期处理后在更新吧。

ps：写程序时犯了一个错误~~~~(>_<)~~~~

由于columns为list list中为map

存的数据为：{header:'居民标识‘,dataIndex:'D0026',flex:1},

{header:'是否重组调整‘,dataIndex:'D0032',flex:1}，。。。。

在for循环外定义的map 将map.put("header","居民标识"},list.add(map)

最后出来结果:{header:'是否重组调整‘,dataIndex:'D0032',flex:1},{header:'是否重组调整‘,dataIndex:'D0032',flex:1}..

被最后一个覆盖 map中的key不能重复。。。（最基本的）还走了一个弯路，list.add(map)后将map.clear()。最后获取的list中没数据

被自己蠢哭了。。

直接放在for循环中定义map即可。（就知道以前写代码，变量需要在for循环外定义，太铭记于心了~~这次就掉坑里了）

Extjs 根据store动态增加列

猜你喜欢