PDA

View Full Version : ComboBox on hidden tabpanel (safari 4.0.4)



StuartMilne
14 Jan 2010, 8:46 AM
Hi there guys

I have a problem with a comboBox arrow appearing to the left of the field.

Basically I have a form with tabs setup.

On my first tab I have a comboBox field that renders correctly with the arrow appearing to the right of the the field. However on my second tab I have a comboBox field that does not render correctly. The arrow appears to the left of the field.

I have removed the comboBox from my second tab and used the comboBox from my first tab and it displays correctly.

Is there a known issue with having multiple comboBoxes on a tab panel. I searched the forums and people had suggested using the listWidth parameter, However this has not worked.

I appreciate your help.

Jamie Avins
14 Jan 2010, 10:39 AM
Need a sample piece of code to go with this so we can see the issue and answer your question.

StuartMilne
15 Jan 2010, 5:29 AM
Below is the code I am currently using


var dialogFormPanelObj = new Ext.FormPanel({
id: 'mainform',
header: false,
frame:false,
width: 550,
defaultType: 'textfield',

items: { // tabpanel
xtype: 'tabpanel',
deferredRender: false,
activeTab: 0,
width:600,
height:250,
plain:true,
bodyBorder: false,
border: false,
defaults:{autoScroll: true},
items: [
{ // fields
layout: 'form',
title: 'General',
bodyStyle:'padding:5px 5px 0; border-top: 0px',
defaults:{xtype: 'textfield', width: 230},
items: [{
id: 'storecode',
name: 'storecode',
fieldLabel: 'Store Code',
allowBlank: false,
post: true
}, {
id: 'companyname',
name: 'companyname',
fieldLabel: 'Company Name',
post: true
},
new Ext.form.ComboBox({
id: 'sitegroup',
name: 'sitegroup',
mode: 'local',
editable: false,
forceSelection: true,
selectOnFocus: true,
triggerAction: 'all',
listWidth: 230,
fieldLabel: 'Site Group',
store: new Ext.data.ArrayStore({
id: 0,
fields: ['id', 'name'],
data: [
['N', 'North'],
['S', 'South']
]
}),
valueField: 'id',
displayField: 'name',
useID: true,
value: 'N',
post: true
}),
new Ext.form.Checkbox({
id: 'active',
name: 'active',
fieldLabel: 'Active',
post: true
})
]
},
{
layout: 'form',
title: 'Address',
bodyStyle:'padding:5px 5px 0; border-top: 0px',
defaults:{xtype: 'textfield', width: 230},
items: [
{
id: 'address1',
name: 'address1',
fieldLabel: 'Address 1',
post: true
},
{
id: 'address2',
name: 'address2',
fieldLabel: 'Address 2',
post: true

},
{
id: 'address3',
name: 'address3',
fieldLabel: 'Address 3',
post: true

},
{
id: 'address4',
name: 'address4',
fieldLabel: 'Address 4',
post: true

},
{
id: 'city',
name: 'city',
fieldLabel: 'City',
post: true

},{
id: 'state',
name: 'state',
fieldLabel: 'State',
post: true

},
{
id: 'postcode',
name: 'postcode',
fieldLabel: 'Post Code',
post: true

},
new Ext.form.ComboBox({
id: 'country',
name: 'country',
mode: 'local',
editable: false,
listWidth: 230,
forceSelection: true,
selectOnFocus: true,
triggerAction: 'all',
fieldLabel: 'Country',
store: new Ext.data.ArrayStore({
id: 0,
fields: ['id', 'name'],
data: [
['10', 'UK'],
['20', 'US']
]
}),
valueField: 'id',
displayField: 'name',
useID: true,
value: '10',
post: true
})
]
},
{
layout: 'form',
title: 'Contact Details',
bodyStyle:'padding:5px 5px 0; border-top: 0px',
defaults:{xtype: 'textfield', width: 230},
items: [
{
id: 'firstname',
name: 'firstname',
fieldLabel: 'Contact First Name',
post: true
},
{
id: 'lastname',
name: 'lastname',
fieldLabel: 'Contact Last Name',
vtype: 'email',
post: true
},
{
id: 'telephone',
name: 'telephone',
fieldLabel: 'Telephone',
post: true

},
{
id: 'email',
name: 'email',
fieldLabel: 'Email',
vtype: 'email',
post: true

},
{
id: 'storeurl',
name: 'storeurl',
fieldLabel: 'Store URL',
vtype: 'url',
post: true

}
]

},
{
layout: 'form',
title: 'Opening Times',
bodyStyle:'padding:5px 5px 0; border-top: 0px'

},
{
layout: 'form',
title: 'Production',
bodyStyle:'padding:5px 5px 0; border-top: 0px'
}
]
},

buttons: [{
text: 'Cancel',
handler: closeHandler
},{
text: 'Save',
handler: saveHandler
}],

baseParams:
{
ref: '{/literal}{$ref}{literal}'
}
});

Condor
15 Jan 2010, 5:45 AM
deferredRender:false will force the second tab to be rendered while it is still hidden.

This can cause sizing issues, unless you configure the second tab with hideMode:'offsets'.

Jamie Avins
15 Jan 2010, 10:40 AM
Yes, this isn't so much a bug as a configuration issue. I'm going to move this to the Help forums.