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 }
]
};

现在我想在Panel

中打开Ext.Window

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

以下是代表相同的小提琴

Demo

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

2 个答案: