Tab panel and card layout in Sencha Touch

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();
    }
});

Tiago Brandes Tiago Brandes · Accepted Answer · 2011-12-08T12:40:53

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);

Tab panel and card layout in Sencha Touch

1 Answers