Question

I am using ExtJS 4 grid, and my requirement is that the grid should be hidden at the first and should be visible when a certain button is pressed.

I dont know if it is a bug or anything, but the problem is that if set the style="display:none;" for the div on which im rendering the grid, and display it later on clicking a button, the grid does not show up. But instead if i show the grid first and the press the button for it to hide or display the grid, it works great.

Here is the code HTML and 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();
    }

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

should work