extjs - 将网格面板添加到选项卡面板的第一个选项卡

Question

我有一个可以正常工作的 GRID。现在我需要将此 GRID 添加到第一个选项卡面板。我怎样才能做到这一点？

我的代码:

GRID.JS

Ext.create('Ext.grid.Panel', {
    xtype:'grid',
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email', flex: 1 },
        { header: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

TAB.JS

Ext.create('Ext.tab.Panel', {
    width: 300,
    height: 200,
    activeTab: 0,
    items: [
        {
            title: 'Tab 1',
            xtype:'grid'
        },
        {
            title: 'Tab 2',
            html : 'Another one'
        }
    ],
    renderTo : Ext.getBody()
});

我已在 GRID.JS 中添加了 xtype:grid，并且我尝试从第一个选项卡中的 TAB.JS 访问该网格，但它没有显示。

Answer 1

xtype: 'grid' - 表示创建标准 Ext.grid.Panel 并将其添加到此处。

您有两个选择:

创建网格并将其保存到变量中。

var _grid = Ext.create('...', {...});

Ext.create('Ext.tab.Panel', {
    ...
    items: [
       _grid
    ]
});

或者，使用 new xtype 定义您自己的类

Ext.define('MyGrid', {
   extend: 'Ext.grid.Panel',
   alias: 'widget.mygrid',
   ... 

});

Ext.create('Ext.tab.Panel', {
    ...
    items: [{
       xtype: 'mygrid'
    }]
});