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();