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

Question

是否有一个函数可以在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'); 
        } 
       }]);   
      } 
     } 
    }); 

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

回答（用代码）：

下面是我根据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(); 
          } 
         }); 
        } 
       }]); 
      } 

Answer 1

如果你不需要任何特殊的逻辑，你可以尝试这样的事：

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

Answer 2

我不得不这样做也并在第一次试图执行就像Eric的一个解决方案，但它在较慢的电脑上产生了主要的滞后问在显示每列后，它会在网格上进行完整的组件布局。

我规避了与此：

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