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

Posted 2023-02-26

【中文标题】将 Ext.grid.Panel 绑定到 Ext.Panel 时出错

【英文标题】：Error when binding Ext.grid.Panel to 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 
                ]
            
        ]
);

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

【参考方案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