View Full Version : tabPanel Docked on top

29 Jun 2010, 7:54 AM
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?

22 Jul 2010, 7:04 AM
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');

4 Aug 2011, 7:17 PM
I tried it, it seems the 'active' event should be 'afterlayout'

1 May 2012, 6:20 AM
Has anyone tried this on in Sencha Touch 2.0?