0

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(); }
4

1 に答える 1

2 
   <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;" >

動作するはずです

于 2012-08-31T10:43:18.430 に答える