ExtJS 4網格現在顯示後，取消隱藏div

Question

我使用ExtJS 4網格，我的要求是網格應該隱藏在第一個，應該是可見的，當按下某個按鈕。

我不知道它是一個錯誤還是其他什麼，但問題是，如果設置style="display:none;"爲im渲染網格的div，並在稍後單擊按鈕時顯示它，網格不會顯示出來。但是，如果我先顯示網格，然後按下按鈕以隱藏或顯示網格，則效果很好。

以下是代碼HTML和Javascript。
HTML：

<div id="outPut"> 
    <div id="gridShowClick" style="height: 50px; 
    width: 180px; background-color:Black; color:White; 
    padding-top:25px; text-align:center;" > 
       Press to show the grid 

    </div> 
</div> 
<div id="hiddenDiv" style="display:none;" > 
    <div id="exampleGrid" style=""> 

    </div> 
</div> 

的Javascript：

var grid; 
    var colModel; 
    Ext.onReady(function() { 
     $("#gridShowClick").bind("click", showGridClick); 
     colModel = [ 
      { 
       header: "Field 1", 
       menuDisabled: true, 
       width: 120, 
       sortable: false 
      }, 
      { 
       header: "Field 2", 
       menuDisabled: true, 
       width: 120, 
       sortable: false 
      }, 
      { 
       header: "Field 3", 
       menuDisabled: true, 
       width: 120, 
       sortable: false 
      }, 
      { 
       header: "Field 4", 
       menuDisabled: true, 
       width: 120, 
       sortable: false 
      }, 
      { 
       header: "Field 5", 
       menuDisabled: true, 
       width: 120, 
       sortable: false 
      } 
     ]; 
     grid = Ext.create('Ext.grid.Panel', { 
      id: "exampleGridPanel", 
      columns: colModel, 
      columnLines: true, 
      renderTo: "exampleGrid" 
     }); 
    }); 
    function showGridClick() { $("#hiddenDiv").show(); } 

Answer 1

<div id="exampleGrid"></div> 

    grid = Ext.create('Ext.grid.Panel', { 
     id: "exampleGridPanel", 
     columns: colModel, 
     columnLines: true, 
     hidden: true //hidden 
     renderTo: "exampleGrid" 
    }); 

    function showGridClick() { 
     Ext.getCmp('exampleGridPanel').show(); 
    } 

去除<div id="hiddenDiv" style="display:none;" >

應該工作