tabPanel Docked on top

[Tuscon]

So I am trying to create a tab panel that is nested within another tab panel. The nested tab panel should show up at the top but still visually look like the bottom docked one. I can't seem to figure out a way to do it. When I dock the nested panel to the top it makes it look like tabs instead of the toolbar. Any way to fix this?

[meyerovb]

The below code should do it. Maybe move this to the feature request board, requesting an easier switch of the tab type. It would be nice to have an easier way of changing a top docked tabbar to have bottom-docked like tabs.

Ext.setup({ onReady: function () {
new Ext.TabPanel({
    fullscreen: true,
    tabBarPosition: 'bottom',
    items: [
        {
            title: 'Tab',
            xtype: 'tabpanel',
            items: [{ title: 'Tab', html: 'content'}],
            listeners: {
                activate: function (panel) {
                    var dom = Ext.select('.x-docked-top', panel.getEl().dom).first().dom;
                    dom.className = dom.className.replace('x-docked-top', 'x-docked-bottom');
                }
            }
        }]
});
}});

[yanhsy]

I tried it, it seems the 'active' event should be 'afterlayout'

[christiandersen]

Has anyone tried this on in Sencha Touch 2.0?