Grid inside Tab

I'm trying to put a Grid (Ext.grid.GridPanel) object inside a Tab .

This is the code:

var grid = new Ext.grid.GridPanel({
    store: new Ext.data.Store({
        autoDestroy: true,
        reader: reader,
        data: xg.dummyData
    }),
    colModel: new Ext.grid.ColumnModel({
        defaults: {
            width: 120,
            sortable: true
        },
        columns: [
            {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: 'Change', dataIndex: 'change'},
            {header: '% Change', dataIndex: 'pctChange'},
            // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
            {
                header: 'Last Updated', width: 135, dataIndex: 'lastChange',
                xtype: 'datecolumn', format: 'M d, Y'开发者_运维知识库
            }
        ]
    }),   
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
    width: 600,
    height: 300,
    frame: true,
    title: 'Framed with Row Selection and Horizontal Scrolling',
    iconCls: 'icon-grid'
});

this.tabs = new Ext.TabPanel({
    fullscreen: true,
    type: 'dark',
    sortable: true,
    dockedItems: [
    {
        xtype:'toolbar',
        title:'Hello World'
    }],
    tabBar: {
        ui: 'light',
        layout: {
            pack: 'left'
        }
    },
    items: [
    {
        cls:'hello',
        id:'tab1',
        html : '<a>hello</a>',
        title:'Monitor'
    }, {
        cls:'world',
        id:'tab2',    
        xtype: 'map',                 
        html : '<a>hello world</a>',
        title:'Map'
    }, {
        cls:'world',
        id:'tab3',                                
        html : '<a>hello world</a>',
        dockedItems:grid
    }]
});      

When I load the page there's no error, but the grid is not shown.

The grid is not a docked item (that's for toolbars and other things that should stick to one side of a container). If you want the grid to take up the entire tab, just add it directly as an item to the TabPanel and it will become the full tab:

items: [
{
    cls:'hello',
    id:'tab1',
    html : '<a>hello</a>',
    title:'Monitor'
}, {
    cls:'world',
    id:'tab2',    
    xtype: 'map',                 
    html : '<a>hello world</a>',
    title:'Map'
},
grid ]