在ExtJS的选项卡式窗格中添加组件

Question

I am trying to make a little proof of concept in ExtJS . I would like to add a panel with a tree into one of my tabs, but I can't seem to find the answer in the API.

The examples look like this

var tabs = Ext.create('Ext.tab.Panel', {
    items: [
        {
            title: 'Tab 1',
            html : 'A simple tab'
        },
        {
            title: 'Tab 2',
            html : 'Another one'
        }
    ],
    renderTo : Ext.getBody()        
});

However I would like something like this :

   var treegrid = Ext.create('KitchenSink.view.tree.TreeGrid', {....});



    var tabs = Ext.create('Ext.tab.Panel', {
        items: [
            {
                title: 'Tab 1',
                html : 'A simple tab'
            },
            {
                title: 'Tab 2',
                myComponent : treegrid
            }
        ],
        renderTo : Ext.getBody()        
    });

I would like to know what i should put at myComponent . Obviously myComponent is not correct.

Sorry if this question seems really naive. I am VERY new to ExtJS.

Answer 1

The grid is a subclass of panel, so it just goes in directly under the tabs:

new Ext.tab.Panel({
    items: [{
        title: 'My Grid',
        xtype: 'gridpanel',
        columns: [],
        // Other grid stuff
    }]
});