PDA

View Full Version : Tab Panel - Cross Browser Layout Problems



espprojects
13 Nov 2009, 5:36 AM
Hi,

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).



Notes:

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,
displayField:'source',
typeAhead: true,
triggerAction: 'all',
emptyText:'Select source ...',
selectOnFocus:true
})
]
}

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

var tabs = new Ext.TabPanel({
activeTab: 0,
border: false,
deferredRender: false,
layoutOnTabChange: true,
defaults:{
layout:'form',
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.