Question

In my application’s main layout there will be three main panels, two regular panels with dynamic content and one tab panel.
Tab panel without being part of card layout working fine, but when I do something like this, tab panel becomes broken (tabs are not switching and” tabBarPosition: ‘bottom’ ” being ignored :

<script type="text/javascript" charset="utf-8">

mainPanel = Ext.create("Ext.Panel", {
    iconCls : 'info',
    title : 'Info',
    html : 'this is info panel'
});
contentPanel = Ext.create("Ext.Panel", {
    iconCls : 'more',
    title : 'About Us',
    html : 'this is about panel'
});
statisticsPanel = Ext.create("Ext.tab.Panel", {
    tabBarPosition: 'bottom',
    items: [
            {
                title: 'Home',
                iconCls: 'home',
                html: 'Home Screen'
            },
            {
                title: 'Contact',
                iconCls: 'user',
                html: 'Contact Screen'
            }
        ]       
});


function onLoad() {
    Ext.create("Ext.Panel", {
        fullscreen : true,
        layout : 'card',
        items : [ mainPanel,contentPanel, statisticsPanel ]
    }).setActiveItem(0);
}

Ext.application({
    name : 'Sencha',
    launch : function() {
        onLoad();
    }
});

Answer 1

I believe you need to instantiate a TabPanel instead of Panel, like this:

Ext.create("Ext.TabPanel", {
    fullscreen : true,
    items : [ mainPanel,contentPanel, statisticsPanel ]
}).setActiveItem(0);