Ext JS 4:将Ext.grid.Panel中的所有列显示为自定义选项

时间:2012-08-27 16:14:52

标签: extjs grid show multiple-columns

是否有一个可以在ExtJS中的Ext.grid.Panel上调用的函数,如果其中一些列默认隐藏,它们将使所有列都可见?每当最终用户需要显示隐藏列时,他们需要单击每列。下面,我有一些代码来选择字段标题时添加自定义菜单选项。我想执行此功能,所有列都显示。

作为下面的示例,我默认隐藏了“项目ID”和“用户创建”。选择“选择所有列”会打开这些列,因此它们会显示在列表视图中。

        listeners: {

            ... 

            },
            afterrender: function() {
                var menu = this.headerCt.getMenu();
                menu.add([{
                    text: 'Select All Columns',
                    handler: function() {
                        var columnDataIndex = menu.activeHeader.dataIndex;
                        alert('custom item for column "'+columnDataIndex+'" was pressed');
                    }
                }]);           
            }
        }
    });

enter image description here

===========================

答案(带代码):

以下是基于以下Eric代码我决定做的事情,因为隐藏所有列是愚蠢的。

            afterrender: function () {
                var menu = this.headerCt.getMenu();
                menu.add([{
                    text: 'Show All Columns',
                    handler: function () {
                        var columnDataIndex = menu.activeHeader.dataIndex;
                        Ext.each(grid.headerCt.getGridColumns(), function (column) {
                            column.show();
                        });
                    }
                }]);
                menu.add([{
                    text: 'Hide All Columns Except This',
                    handler: function () {
                        var columnDataIndex = menu.activeHeader.dataIndex;
                        alert(columnDataIndex);
                        Ext.each(grid.headerCt.getGridColumns(), function (column) {
                            if (column.dataIndex != columnDataIndex) {
                                column.hide();
                            }
                        });
                    }
                }]);
            }

2 个答案:

答案 0 :(得分:4)

如果您不需要任何特殊逻辑,可以尝试这样的事情:

Ext.each(grid.headerCt.getGridColumns(), function(column){
    column.show();
});

答案 1 :(得分:1)

我也必须这样做,并且最初尝试像Eric一样实现解决方案,但它在较慢的计算机上产生了主要的滞后问题。在显示每列后,它在网格上执行完整的组件布局。

我用这个来规避了这个:

grid.suspendLayout = true;
Ext.each(grid.headerCt.getGridColumns(), function(column) {
    column.show();
});
grid.suspendLayout = false;
grid.doComponentLayout();