将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

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

这结束一个错误打开Panel - 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(); 

下面是represnt小提琴一样

Demo