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

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/动态改变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

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(new_record);
store.commitChanges();

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