In tab panel, setDocked removes tab bar

[jweber]

REQUIRED INFORMATION


Ext version tested:

• Sencha Touch 2.1.1

Browser versions tested against:

• Chrome (Mac) 24.0.1312.57

DOCTYPE tested against:

• html

Description:

• If you call setTabBarPosition on a tab panel (which just calls setDocked on its tab bar), the tab bar is removed from the DOM.

Steps to reproduce the problem:

• Run the code below

The result that was expected:

• Tab bar is moved to the bottom of the tab panel

The result that occurs instead:

• Tab bar is removed from the DOM

Test Case:

Ext.define('Main', {
	extend: 'Ext.tab.Panel',
	config: {
		fullscreen: true,
		tabBarPosition: 'top',
		width: '100%',
		height: '100%',
		items: [{
			title: 'first',
			html: 'first'
		}, {
			title: 'second',
			html: 'second'
		}]
	}
});

var main = Ext.create('Main');
main.setTabBarPosition('bottom');

HELPFUL INFORMATION


Screenshot or Video:

• N/A

See this URL for live test case: N/A


Debugging already done:

• none

Possible fix:

• It looks like in Ext.tab.Bar, doSetDocked() is overriding the version in Ext.Component. If you add the code from Ext.Component to the end of that function, it seems to work.

Additional CSS used:

• only default ext-all.css

Operating System:

• Mac OS 10.8.2

[mitchellsimoens]

I think the developer needs to be aware of this but I also think the framework needs to protect itself here also. I have opened a ticket to discuss with engineering