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

Question

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

Answer 1

我认为这就是您正在寻找的http://www.extjs.com/forum/showthread.php?53009-Adding-removing-fields-and-columns

确保您也查看线程中的帖子#37。

Answer 2

对于那些寻求 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-sharing-the-structure-of-a-grid-in-extjs-4-2/

Answer 3

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

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

Answer 4

在 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 5

也许试试

store.add(new_record); store.commitChanges();

或 store.remove() 和 store.commitChanges()

Answer 6

该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();