Is it possible to nest a tabpanel inside a vbox?

[LoneWolfPR]

I'm trying to implement the following but it doesn't seem to work. It just loads with the tabbar at the top of the page without showing the logo bar that should be in the first part of the vbox. What I want is for the logo bar listed to be persistent across the top and when you click the tab bar buttons the content slides back and forth below the logo bar. Is this possible, and if so, what am I doing wrong?

Ext.define("RFN.view.Main", {    extend: 'Ext.Panel',
    config: {
        items: [
            {
                
                //styleHtmlContent: true,
                //scrollable: true,
                layout: 'vbox',
                items:[
                    {
                        xtype: 'image',
                        src: 'resources/images/logo.png',
                        style: 'background-color: #174a7c; background-position:center; background-size:auto 90%; text-align:center;',
                        flex: 1
                        
                    },
                    {
                        xtype: 'tabpanel',
                        tabBarPosition: 'bottom',
                        
                        items: [
                            {
                                title: 'Calculate',
                                iconCls: 'home',
                                xtype: 'formpanel',
                                items: [
                                    //
                                ],
                            },
                            {
                                title: 'Compare',
                                iconCls: 'chart2',
                                //styleHtmlContent: true,
                                //scrollable: true,
                                layout: 'fit',
                                items:[
                                    {
                                        xtype: 'panel',
                                        style: 'background-color: #eee;',
                                        html: '<div id="chart_div"></div>'
                                        
                                    }
                                ]
                            }
                            
                        ],
                        style: 'background-color: #eee; text-align:center; margin:0;',
                        flex:3.5
                    }
                ]
            }
            
        ]
    }
});

[jerome76]

I think you have too many containers.
Try this out:

Ext.define("RFN.view.Main", {
    extend: 'Ext.Panel',
    config: {
        layout: 'vbox',
        items: [{
            xtype: 'image',
            src: 'resources/images/logo.png',
            style: 'background-color: #174a7c; background-position:center; background-size:auto 90%; text-align:center;',
            flex: 1
        },
        {
            xtype: 'tabpanel',
            tabBarPosition: 'bottom',
            items: [
                {
                    title: 'Calculate',
                    iconCls: 'home',
                    xtype: 'formpanel'
                },
                {
                    title: 'Compare',
                    iconCls: 'chart2',
                    layout: 'fit',
                    items:[
                        {
                            xtype: 'panel',
                            style: 'background-color: #eee;',
                            html: '<div id="chart_div"></div>'
                        }
                    ]
                }
            ],
            style: 'background-color: #eee; text-align:center; margin:0;',
            flex:3.5
        }] 
    }
});

[LoneWolfPR]

That was it! Thanks so much! That was driving me nuts. Looks like there was an items group that I didn't need.