javascript - 取消隐藏 div 后现在显示 ExtJS 4 网格

Question

我正在使用 ExtJS 4 网格，我的要求是网格应该首先隐藏，并且在按下某个按钮时应该可见。

我不知道这是否是错误或任何东西，但问题是如果style="display:none;"为我渲染网格的 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;" >

应该管用