在列上分组时动态隐藏 ExtJS 4 网格列

Question

我有一个 ExtJS 4 gridPanel 如下：

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    title: 'grid',
    columns: [
        {text: 'column 1', sortable: true, width: 70, dataIndex: 'column1'},
        {text: 'column 2', sortable: true, width: 70, dataIndex: 'column2'},
        {text: 'column 3', sortable: true, width: 70, dataIndex: 'column3'},
        {text: 'column 4', sortable: true, width: 70, dataIndex: 'column4'},
    ],
    renderTo: Ext.get('gridDiv'),
    width: 800,
    height: 600,
    listeners: {
    },
    features: [{
        ftype: 'grouping'
    }]
});

每当对网格进行分组时，我都需要动态隐藏对网格进行分组的列，并显示所有其他列 - 重新显示任何以前隐藏的列。

我知道这将是一个侦听器处理程序，它捕获分组更改，然后触发column.hide()。

一些伪代码：

...
listeners: {
    groupchange: function(store, groupers, eOpts) {
        groupers.forEach(function(group) {
            grid.columns.forEach(function(column) {
                if(column==group)
                    column.hide();
                if(column==group)
                    column.show();
            }
        }
    }
},
...

我从 API 文档中不确定groupchange 是否是可以被网格而不是存储捕获的事件，如何访问groupers 的内容，以及哪些比较器可用于确定是否groupers 中有一列。

应该如何构造这个监听器事件？正确的事件/方法/属性是什么？

Answer 1

发现隐藏是在存储侦听器上完成的，尽管网格面板 API 使它看起来好像可以作为网格侦听器完成。我已经处理了 groupers 中的第一个 keys 数组值，尽管您可以轻松地使用 items[0].property 值。

var store = Ext.create('Ext.data.Store', {
    ...
    listeners:
    {
        groupchange: function(store, groupers, eOpts){
            var column = groupers.keys[0];
            productionItemGrid.columns.forEach(function(entry){
                if(entry.dataIndex == column)
                {
                    entry.setVisible(false);
                }
                else
                {
                    entry.setVisible(true);
                }
            });
        }
    }
    ...
});