EXTJS 中grid动态增加列的方法

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

romi17

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

阅读量4.2k

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/romi17/article/details/82229377

版权

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

摘要由CSDN通过智能技术生成

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、适合报表展示

报表展示类型的动态增加，一般上是每次查询成功后动态增加，把上次动态增加的字段移除&