取消隐藏div后，现在显示ExtJS 4栅格

Question

我使用的是ExtJS 4网格，我的要求是网格应该在第一次被隐藏，并且当某个按钮被按下时应该是可见的。

我不知道这是错误还是什么，但问题是，如果为渲染网格的div设置style="display:none;"，并在稍后单击按钮时显示它，网格就不会显示出来。但是，如果我首先显示网格，然后按下按钮隐藏或显示网格，它会工作得很好。

下面是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;" >

应该行得通