Question

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

我不知道它是一个bug还是其他任何东西，但问题是如果为我渲染网格的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;" >

应该有效

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

1 个答案: