How to position Toolbar above tab bar on tab panel

[NMFord]

How do I position a toolbar above a tabbar on a tab panel? In my application the tab panel is positioned above the toolbar which is frustrating since the toolbar contains the title for the page...

Here is the code for my toolbar

        var topToolbar = new Ext.Toolbar({
            title: 'Gene Display',
            docked: 'top',
            items: [
                backButton,
                searchButton
            ]
        });

I'm adding the toolbar and the tabs to the tab panel like this:

this.add([topToolbar,geneTab,functionTab]);

This is the result:

o5fY8.jpg

Can anyone tell me what's going on?

[jratcliff]

well, you're only showing some code snippets so I'm not sure when/how you are doing things.

As an alternative, you can create your tab panel this way and the toolbar is docked to the top:

Ext.create('Ext.tab.Panel', {
    fullscreen: true,

    items: [
        {
            xtype  : 'toolbar',
            title  : 'Gene Display',
            docked : 'top',
            items  : [
                {
                    text : 'Results',
                    ui   : 'back'
                },
                {
                    text : 'Search',
                    ui   : 'back'
                }
            ]
        },
        {
            title : 'Gene',
            html  : 'Gene Screen'
        },
        {
            title : 'Function',
            html  : 'Function Screen'
        }
    ]
});