Adding a Grid Panel to the 1st tab of the Tab Panel

extjs, extjs4, extjs4.1, sencha-touch

Solution

`xtype: 'grid'` - means `create standard Ext.grid.Panel and add it here`.

You have two options:

Create your grid and save it into variable.

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

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

Or, define your own class with new `xtype`

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

});

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

Problem

I have a GRID which works properly. Now I need to add this GRID to the first Tab Panel. How can I do that? my code: 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() }); ``` I have added the `xtype:grid` in GRID.JS and I am trying to access that Grid from TAB.JS in the 1st tab, but it is not getting displayed.

Original source