Ext version tested:
  • Ext 3.3.1

Adapter used:
  • ext

css used:
  • only default ext-all.css



Browser versions tested against:
  • ____
  • IE 9 beta
  • FF 3.6.13 (firebug 1.6.1 installed)
  • Chrome 8.0.552.237

Operating System:
  • Windows 7

Description:
  • In a tab panel with deferredRender set to false, toolbars on the tab item render correctly, but nested toolbars are not correctly rendering combobox controls. They appear stacked on top of one another. LayoutOnTabChange set to true does not correct it.

Test Case:

Code:
    Ext.onReady(function(){
				var mainTab = new Ext.TabPanel({
					deferredRender: false,
					layoutOnTabChange: true,
					renderTo: Ext.getBody(),
					height: 600,
					width: 800,
					activeTab: 0,
					items: [
						{
							title: 'Tab 1',
							html: '<p style="padding: 5px;">Click Tab 2 to see combo boxes rendered incorrectly in toolbar</p>'
						},
						{
							xtype: 'panel',
							title: 'Tab 2', 
							layout: 'vbox',
							tbar: [{text: 'button'},'-',{xtype: 'combo', width: 120},' ',{xtype: 'combo', width: 120},' ',{xtype: 'combo', width: 120}],
							layoutConfig: {
								align: 'stretch'
							},
							items: [{
								flex: 1,
								tbar: [{text: 'button'},'-',{xtype: 'combo', width: 120},' ',{xtype: 'combo', width: 120},' ',{xtype: 'combo', width: 120}],
								title: 'My Panel',
								margins: '5 5 0 5',
								html: '<p style="padding: 5px;">Panel 1 Content</p>'
							},{
								flex: 1,
								tbar: [{text: 'button'},'-',{xtype: 'combo', width: 120},' ',{xtype: 'combo', width: 120},' ',{xtype: 'combo', width: 120}],
								title: 'My 2nd Panel',
								margins: '5 5 5 5',
								html: '<p style="padding: 5px;">Panel 2 Content</p>'
							}]
						}
					]
					});
			});

Steps to reproduce the problem:
  • Click on tab 2 after render

The result that was expected:
  • Correct layout

The result that occurs instead:
  • Incorrect layout for nested toolbars. Combo-boxes are overlapping

Possible fix:
  • The only way I was able to correct it manually from firebug was to call .syncSize() on each combobox, (which set the width very small), then call .setWidth(120) on each combobox. I have not found a way to correct it in code, other than to set deferredRender: true