View Full Version : Tab Panel - Cross Browser Layout Problems

13 Nov 2009, 5:36 AM

I'm having trouble with the layout/rendering of a form containing two tabs. It works as expected in Firefox but in IE 7 the fields on the second tab don't show (unless I switch backwards and forwards between the two tabs).


This works perfectly as desired in Firefox
I want both tabs to be submitted together so I set deferredRender: false
If I remove the line hideMode: 'offsets' then it works perfectly in IE but the combo box dropdown does not go to the correct width in Firefox.
I haven't included the code for the stores, but they do work as expected bringing in the correct data from the server.
Here is my code:

var tabA = {
title: 'Tab A',
items: [
new Ext.form.ComboBox({
fieldLabel: 'Source',
name: 'sourceID',
store: storeA,
typeAhead: true,
triggerAction: 'all',
emptyText:'Select source ...',

var tabB = {
title: 'Tab B',
items: [
new Ext.form.ComboBox({
fieldLabel: 'Destination',
name: 'destinationID',
store: storeB,
typeAhead: true,
triggerAction: 'all',
emptyText:'Select destination ...',

var tabs = new Ext.TabPanel({
activeTab: 0,
border: false,
deferredRender: false,
layoutOnTabChange: true,
defaultType: 'textfield',
hideMode: 'offsets',
defaults: {width: 230},
bodyStyle:'padding:20px 5px;'
items:[tabA, tabB]

Any help or advice would be welcome. I am very new to Ext JS. Thanks.