ExtJS Tab Panel - Tabs Not Displaying

Question

I am trying to setup a tab panel on my page, which contains 2 tabs with both containing grids. However, I cannot get my first grid panel to even display as a tab.

var tabHistoryPanel = Ext.create('Ext.tab.Panel',
{
    name: 'historyTabs',
    id: 'historyTabs',
    border: false,
    flex: 1,
    activeTab: 0, 
//  layout: 'fit', 
//  style: 'border-top: 1px solid #4c535c;',    
    items: [                    
        actionsGrid,
        {
            title: 'Test',
            border: false,
            html: 'Testing'
        }
    ],
    dockedItems:
    [ .............

And here is the grid panel I am trying to add in. I can get the 'Test' tab to display, but not the actionsGrid. Am I missing something here?

var actionsGrid = Ext.create('Ext.grid.Panel',
    {
        title: 'Property',
        id: 'userActionsGrid',          
    //  style: 'border-top: 1px solid #4c535c;',
        border: false,
        flex: 1,
        store: Ext.create('Ext.data.Store',
        {................

My tabHistoryPanel is contained in this layout. Essentially, there is a tree structure above the panel with the tabs.

return Ext.create('Ext.panel.Panel',
    {
        border: false,
        layout:
        {
            type: 'vbox',
            align: 'stretch'
        },
        items:
            [
                userTree,
                tabHistoryPanel
            ]
    });

Answer 1

I finally fixed this. Instead of assigning tab panel to a variable and putting it in my returned panel, I had to define it explicitly in the returned panel. See below. Couldn't tell you why it didn't work before, but its fixed.

return Ext.create('Ext.panel.Panel',
    {
        border: false,
        layout:
        {
            type: 'vbox',
            align: 'stretch'
        },
        items:
        [
            userTree,
            {
                xtype: 'tabpanel',
                name: 'historyTabs',
                id: 'historyTabs',
                flex: 1,
                activeTab: 0, 
                dockedItems: historyToolbar,    
                items: [                                                            
                        actionsGrid,
                        {
                            title: 'Test',
                            border: false,
                            html: 'Testing'
                        }
                ]
            }
        ]
    });