EXTJS 中grid动态增加列的方法

EXTJS 中grid动态增加列的方法有多种,下面逐个说明:

1、适用创建带editor的列,但种方法不太适合报表展示

需要创建带editor的列,一般上同时存在一些已经固定的列,并且这些固定列基本上存在已经编写好配置和事件代码,这些固定的列是不需要重新创建的。此时只需要在初始化时,动态增加需要的列,也就是说动态增加的列只增加一次即可,不需要移除,然后重新加载。代码如下:

var data = ['a','b','c'];
for(var key in data) {
  var value = data[key];
  var column = Ext.create('Ext.grid.column.Column', {
    text: value,
    width:60,
    style: "text-align:center;",
    align:'center',
    dataIndex: key,
    editor: {
      listeners: "",
      onTriggerClick: "",
      xtype: "numberfield",
      hideTrigger: true,
      minValue: 0,
      selectOnFocus: true,
      step: 0,
      value: 0
    }
  });
  grid.headerCt.insert(grid.columns.length, column);
}
grid.getView().refresh();

2、适合报表展示

报表展示类型的动态增加,一般上是每次查询成功后动态增加,把上次动态增加的字段移除,然后再固定字段的基础上增加新的动态字段。

我的做法是,先定义数据变量 ,将固定项目保存起来,每次查询成功后,把所有的字段都移除,然后再根据保存的固定项目+新的字段一起重新构建 

2.1.定义变量

listFixedCol:[]//排程列表结果固定字段

2.2.保存固定项目

//2.1记录固定字段到listFixedCol,然后再增加字段
//记录原始字段,主要为后面的动态增加尺码使用
var col = app.gridList.columns;
var colCount = col.length;
for(var i=0;i

2.3.在固定项目的基础上增加动态项目

app.gridList.store.load({params:{},
                         callback:function(){

                           //新加的尺码字段                           
                           var newCol = [];
                           for(var i=0;i

 

你可能感兴趣的:(WEB)