将 Ext.grid.Panel 绑定到 Ext.Panel 时出错答案

【问题标题】：Error when binding Ext.grid.Panel to Ext.Panel将 Ext.grid.Panel 绑定到 Ext.Panel 时出错
【发布时间】：2013-11-25 05:17:54
【问题描述】：

我是 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 }
                ]
            }
        ]
});

我之前的代码出了什么问题？

【问题讨论】：

标签： javascript extjs extjs4

【解决方案1】：

当然不行。您实际上是在这样做：

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

【讨论】：

好的，我同意，但是如果Grid 在另一个.js file 中呢？
没什么区别，不能乱序运行代码。
好的，我还有 1 个问题 1. var Grid = { xtype: 'grid',.... 和 var Grid = Ext.create('Ext.grid.Panel', {... 有什么区别
2.有一个data.store -Ext.create('Ext.data.Store', { storeId: 'StoreId', fields: ['resort', 'arrival', 'guest'], data: { 'items': [ { 'resort': '00CPT', "arrival": "16 Jun 2013", "guest": "Judy Roehsner" }, { 'resort': '', "arrival": "", "guest": "Robert Roehsner" } ] }, proxy: { type: 'memory', reader: { type: 'json', root: 'items' } } });
当我将此商店分配给Var Grid = { xtype: 'grid', store: Ext.data.StoreManager.lookup('StoreId'), columns: [ { header: 'Resort', dataIndex: 'resort' }, { header: 'Arrival', dataIndex: 'arrival' }, { header: 'Accompanying Guest(s)', dataIndex: 'guest', flex: 1 } ] }; 时，它最终出现了错误。这里有什么问题？

【解决方案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();

下面是表示相同的小提琴

Demo

【讨论】：