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使它看起来好像可以作为网格监听器完成。我已经处理了石斑鱼中的第一个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);
                }
            });
        }
    }
    ...
});

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

1 个答案: