如何在网格面板中删除或添加列

Question

grid.getcolumnModel（）.setHidden（0，true）将对列菜单 生效，而不是网格面板。在列菜单中，您可以启用或禁用列。我们如何动态添加或删除网格面板中的列？

Answer 1

您可能需要刷新Ext.grid.GridView才能显示列更改。

grid.getView().refresh(true) // true to refresh HeadersToo 

Answer 2

我认为这是你在找什么http://www.extjs.com/forum/showthread.php?53009-Adding-removing-fields-and-columns

确保您在线程看后＃37为好。

Answer 3

在ExtJS的3.X这段代码可以帮助：

注：我已经使用复选框，作为第一列。如果你不需要，请删除该行。

var newColModel = new Ext.grid.ColumnModel({ 
    columns: [ 
     grid.getSelectionModel(), 
     { 
      header: 'New column 1' 
     }, { 
      header: 'New column 2' 
     } 
    ], 
    defaults: { 
     sortable: false 
    } 
}); 

grid.store.reader = new Ext.data.JsonReader({ 
    root: 'items', 
    totalProperty: 'count', 
    fields: [ 
     // Please provide new array of fields here 
    ] 
}); 

grid.reconfigure(grid.store, newColModel); 

Answer 4

对于那些谁达到了这个问题寻找一个Ext.js 4.2和avobe的解决方案。

我用“重新配置”的方法来动态改变网格列：http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.Panel-method-reconfigure

这里是一个很好的例子：http://marcusschiesser.de/2013/12/21/dynamically-changing-the-structure-of-a-grid-in-extjs-4-2/

Answer 5

的reconfigure功能可能不能很好地工作的插件。特别是如果你有类似FilterBar的东西。

如果您只需要这样做一次，基于一些使用的全局设置可以使用initComponent并更改您的初始配置。请务必之前进行的所有更改配置调用this.callParent();

测试用的ExtJS 6.2（也应该适用于ExtJS的4和5）

initComponent: function() { 
    // less columns for this setting 
    if (!app.Settings.dontUseFruits()) { 
     var newColumns = []; 
     for(var i=0; i<this.columns.items.length; i++) { 
      var column = this.columns.items[i]; 
      // remove (don't add) columns for which `dataIndex` starts with "fruit" 
      if (column.dataIndex.search(/^fruit/) < 0) { 
       newColumns.push(column); 
      } 
     } 
     this.columns.items = newColumns; 
    } 

    this.callParent(); 

Answer 6

也许尝试

store.add（新纪录）; store.commitChanges（）;

或store.remove（）和store.commitChanges（）