EXTJS 中grid动态增加列的方法

最新推荐文章于 2022-08-30 10:59:57 发布

原创最新推荐文章于 2022-08-30 10:59:57 发布 · 4.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

WEB 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了EXTJS中动态增加Grid列的两种方法，适用于创建带editor的列以及报表展示。在创建带editor的列时，只需在初始化时动态增加，而报表展示则需要每次查询后移除旧字段并重新构建列。具体实现包括定义数据变量、保存固定项目及根据新数据动态增加列的操作。

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<colCount;i++){
  app.listFixedCol.push(col[i]);
  app.listFixedCol.push({
    xtype:col[i].xtype,
    titleAlign:col[i].titleAlign?col[i].titleAlign:'left',
    text: col[i].text,
    dataIndex: col[i].dataIndex,
    align:col[i].align,
    width: col[i].width,
    itemId:col[i].itemId,
	initialConfig:col[i].initialConfig,
    format:col[i].format,
    renderer:col[i].renderer,
    summaryRenderer:col[i].summaryRenderer,
    summaryType:col[i].summaryType
  });
}

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

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

                           //新加的尺码字段                           
                           var newCol = [];
                           for(var i=0;i<app.listFixedCol.length;i++){
                             newCol.push(app.listFixedCol[i]);                             
                           }    

                           //动态加载
                           newCol.push({
                             xtype:"gridcolumn",
                             itemId: "colMON08",
                             text: "2018{#Str.年#}08{#Str.月#}",
                             items: [{
                               xtype:"gridcolumn",    
                               align: "right",
                               dataIndex: "20180801",
                               itemId: "col0801",
                               text: "0801",
                               editor: {
                                 listeners: "",
                                 onTriggerClick: "",
                                 xtype: "numberfield",
                                 hideTrigger: true,
                                 minValue: 0,
                                 selectOnFocus: true,
                                 step: 0,
                                 value: 0
                               },
                               titleAlign: "right"    
                             }, {
                               xtype:"gridcolumn",
                               dataIndex: "20180802",
                               itemId: "col0802",
                               text: "0802",
                               editor: {
                                 listeners: "",
                                 onTriggerClick: "",
                                 xtype: "numberfield",
                                 hideTrigger: true,
                                 minValue: 0,
                                 selectOnFocus: true,
                                 step: 0,
                                 value: 0
                               }
                             }]
                           });

                           Ext.suspendLayouts();

                           app.gridList.headerCt.removeAll(); //清除系统column
                           app.gridList.reconfigure(null, newCol);
                           Wb.loadColumns(app.gridList);
                           Ext.resumeLayouts(true);
                         }
                        });