View Full Version : Panels within Tab Panel not displaying properly

6 Apr 2008, 12:50 PM
I have read a ton of post and tried to get this to work but I just can't seem to get it correct.

I have a tabbed panel that has 4 tabs. Each tab is a panel. When I set the active tab to any of the 4 that tab looks perfect, but the other appear a bit off. The ones that look strange are all form panels. Each of the tabbed panels are definded above the tab panel itself.

Some thing like...

var panel1 = new Ext.Panel();
var panel2 = new Ext.Panel();
var panel3 = new Ext.Panel();
var panel4 = new Ext.Panel();

And the table panel looks like..

var viewport = new Ext.Viewport({
layout: 'border',
items: [new Ext.Panel({
id: 'headerPanel',
region: 'north',
layout: 'fit',
bodyStyle: "position: relative;bottom: 0;background-image: url('./images/clouds.png');background-repeat: no-repeat;background-position: bottom right;",
contentEl: 'headerWrapper',
height: 150
}), new Ext.TabPanel({
region: 'center',
deferredRender: false,
activeTab: 0,
autoWidth: true,
items: [faresPanel, searchForFaresPanel, preferencesPanel, sendAFriendPanel]

Notice that I do use "deferredRender: false on the tab panel itself.

Is there something small that I am missing to get the panel to look correct in a tabbed panel?


6 Apr 2008, 5:18 PM
try config options "layout:'fit'" and "layoutOnTabChange:true"

6 Apr 2008, 8:41 PM
try config options "layout:'fit'" and "layoutOnTabChange:true"

I used the layoutOnTabChange:true option on the tab panel and this fixed the behavior on one of my tabs which has a simple FormPanel. The other tab contains a FormPanel with combo boxes that do not render properly even with this option.

The layout:'fit' option on a tab panel causes error so you must have meant that I should try that elsewhere in the mix. If so let me know where so that I could give that a try.

7 Apr 2008, 1:13 AM
is the id different or the same?

7 Apr 2008, 5:25 AM
The ID of what?

7 Apr 2008, 5:30 AM
BTW here is the panel with the combo boxes that are displaying with a list that is about 30% as wide at the box itself.

var searchForFaresPanel = new Ext.form.FormPanel({
url: '/tmp/Url',
frame: true,
layout: 'fit',
defaultType: 'textfield',
items: {
xtype: 'fieldset',
title: 'Choose your From and To Aiports, Dates, Passenger, and Flexible Dates',
collapsible: false,
autoHeight: true,
autoWidth: true,
defaultType: 'textfield',
items: [new Ext.form.ComboBox({
store: airportStore,
fieldLabel: 'Flying From',
displayField: 'name',
valueField: 'code',
name: 'departingAirport',
editable: false,
mode: 'local',
triggerAction: 'all',
emptyText: 'Flying From'
}), new Ext.form.ComboBox({
store: airportStore,
fieldLabel: 'Flying To',
displayField: 'name',
valueField: 'code',
name: 'destinationAirport',
editable: false,
mode: 'local',
triggerAction: 'all',
emptyText: 'Flying To'
}), new Ext.form.DateField({
fieldLabel: 'Depart Date',
}), new Ext.form.DateField({
fieldLabel: 'Return Date',
}), {
fieldLabel: 'Mobile',
name: 'mobile'
}, {
fieldLabel: 'Fax',
name: 'fax'

7 Apr 2008, 7:28 AM

I've got the same problem

I've got Tab panel and inside Form Panel. In this form panel comboboxes are not correctly displayed.

7 Apr 2008, 8:50 AM
I also have this problem. A viewport with north, south, west and center regions. The center region contains a TabPanel, where I have 3 tabs, each with differing content:

Tab 0, an Ext.Panel, with a single Ext.Button (for a simple test)
Tab 1, another Ext.Panel, with Static HTML
Tab 2, Ext.GridPanel

Tab 1 is active on load.

Tabs 1 and 2 display fine.

Tab 0 will not render the button unless: A ) I resize the browser (sliding the FireBug window works); or B ) I set Tab 0 as active in the first place.

Tab order makes no difference.

When I click to Tab 0, I receive the Ext.Panel's render event (on the first time only), but children don't render.

If this is a bug where the render event isn't being properly received / or propagated to children, how can I force the render to propagate?

Thanks in advance!

7 Apr 2008, 9:03 AM

rudytheng meant that you should check that you did not use the same id more than once. If you would, you would see strange rendering issues. rudytheng guess can be true so you should check that.

nmaves & webik,

please provide some screenshots because i don't really understand what is going wrong (and webik, post the config you used)


sounds like you need to add eighter "layoutOnTabChange:true" or "deferredRender:false" to the config of your TabPanel. If that doesn't help, post your config.

8 Apr 2008, 1:05 AM

Thanks alot! "layoutOnTabChange:true" was what I was looking for. Thanks for the quick response.

For anyone else having this problem, both deferredRender:false and layoutOnTabChange:true will work, the only difference being the time of render.

8 Apr 2008, 1:32 AM
yeah screenshots will be more meaningful..... :P

8 Apr 2008, 1:46 AM

I post it in new thread: