將Ext.grid.Panel綁定到Ext.Panel時出錯

Question

我是extJS的新手。 我想將一個Ext.grid.Panel綁定到Ext.Panel （是的，我真的想要那個！）。 這就是我嘗試過的-

Var Panel = new Ext.Panel({
    title: 'Test',
    id: 'Panel',
    items: [Grid]
});

Var Grid =
{
xtype: 'grid',
columns: [
    { header: 'Resort', dataIndex: 'resort' },
    { header: 'Arrival', dataIndex: 'arrival' },
    { header: 'Accompanying Guest(s)', dataIndex: 'guest', flex: 1 }
]
};

現在我想在Ext.Window打開Panel

var win2 = new Ext.Window({
                    layout: 'fit',
                    width: 900,
                    height: 600,
                    closeAction: 'hide',
                    plain: true,
                    items: [Panel]                        
                });
                b.getEl().on('click', function () {
                    win2.show();
                });

這以錯誤結尾Uncaught TypeError: Cannot read property 'events' of undefined

但是，當我按以下方式更改Panel ，它的工作正常-

var Panel = new Ext.Panel({
    title: 'Test',
    id: 'Panel',
    items:
        [
            {
                xtype: 'grid',
                columns: [
                        { header: 'Resort', dataIndex: 'resort' },
                        { header: 'Arrival', dataIndex: 'arrival' },
                        { header: 'Accompanying Guest(s)', dataIndex: 'guest', flex: 1 }
                ]
            }
        ]
});

我之前的代碼出了什么問題？

Answer 1

當然不行了。 您實際上是在這樣做：

var y = x + 1;
console.log(y); // Why isn't y 2?
var x = 1;

Answer 2

您必須先定義網格，然后才能在以下項目中使用它：

var Grid = {
    xtype: 'grid',
    columns: [{
        header: 'Resort',
        dataIndex: 'resort'
    }, {
        header: 'Arrival',
        dataIndex: 'arrival'
    }, {
        header: 'Accompanying Guest(s)',
        dataIndex: 'guest',
        flex: 1
    }]
};

var Panel = new Ext.Panel({
   // title: 'Test',
    id: 'Panel',
    items: [Grid]
});

否則，還有一個選擇（當您在其他js文件中包含網格時，可以按如下所示使用偵聽器）：

        var Panel = new Ext.Panel({
            // title: 'Test',
            id: 'Panel',
            items: [],
            listeners: {
                render: function(pnl) {
                    pnl.add(Grid);
                }

            }
        });

        var Grid = {
            xtype: 'grid',
            columns: [{
                header: 'Resort',
                dataIndex: 'resort'
            }, {
                header: 'Arrival',
                dataIndex: 'arrival'
            }, {
                header: 'Accompanying Guest(s)',
                dataIndex: 'guest',
                flex: 1
            }]
        };

        var win2 = new Ext.Window({
            layout: 'fit',
            width: 500,
            height: 400,
            closeAction: 'hide',
            plain: true,
            items: [Panel]
        });
        b.getEl().on('click', function() {
            win2.show();

以下是表示相同的小提琴

演示版