ExtJS - problem setting combobox width - combobox

Question

Let me preface this by saying that I've been working with ExtJS for all of a week and half, so please pardon the noobishness.
I'm building a form inside of a tab panel, and I was testing different ways to lay out two comboboxes side by side instead of stacked on top of each other. My first attempt was with a fieldset, but I abandoned that for a container with a column layout.
Which led me to the following code:
Ext.onReady( function() {
var tabs = new Ext.TabPanel({
renderTo: 'myForm',
activeTab: 0,
autoHeight: true,
header: true,
title: "Test Title",
border: false,
defaults: {
height: 256,
tabCls: 'order-tab'
},
items: [
{
title: 'Tab 1',
contentEl: 'tab1',
}
]
});
// Account Dropdown
var accountField = new Ext.form.ComboBox({
fieldLabel: 'Account',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'accountId',
'displayText'
],
data: [[1, 'Account 1'], [2, 'Account 2']]
}),
displayField: 'displayText',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select an account',
selectOnFocus:true,
boxMaxWidth: 170
});
//Type dropdown
var accountTypeField = new Ext.form.ComboBox({
fieldLabel: 'Type',
store: new Ext.data.ArrayStore({
id: 1,
fields: [
'accountTypeId',
'displayText'
],
data: [[0, 'Type1'], [1, 'Type2']]
}),
displayField: 'displayText',
typeAhead: false,
editable: false,
mode: 'local',
triggerAction: 'all',
value: 'Type1',
selectOnFocus:true,
boxMaxWidth: 109
});
//Account info fieldset (account dropdown + type dropdown)
var accountInfo = new Ext.form.FieldSet({
defaults: {
anchor: '-20'
},
items :[
accountTypeField
]
});
//Account info (account dropdown + type dropdown)
var accountInfoGroup = new Ext.Container({
autoEl: 'div',
layout: 'column',
cls: 'account-info',
defaults: {
xtype: 'container',
autoEl: 'div',
columnWidth: 1,
anchor: '-20',
},
"items":[
{
"layout":"column",
"items":[
{
"columnWidth":0.6,
"layout":"form",
"labelWidth": 50,
"items":[
accountField
]
},
{
"columnWidth":0.4,
"layout":"form",
"labelWidth": 30,
"anchor":-20,
"items":[
accountTypeField
]
}
]
}
]
});
this.form= new Ext.FormPanel({
applyTo: 'tab1',
border:false,
defaults:{xtype:'textfield'},
items:[
accountInfoGroup,
]
});
});
This looked the way I wanted it to, so I started going back to clean up the unused fieldset code.
Which brings me to the goofy part. When I strip out this section:
//Account info fieldset (account dropdown + type dropdown)
var accountInfo = new Ext.form.FieldSet({
defaults: {
anchor: '-20'
},
items :[
accountTypeField
]
});
...the maxBoxWidth declaration on accountTypeField suddenly gets ignored and the layout goes all wonky. Just to be clear, there was more code in the fieldset snippet originally, but I could take all of it out and have the maxBoxWidth work fine UNTIL I tried to take out those two remaining pieces (defaults > anchor and items > accountTypeField).
So my question is, what is going on? Why does removing that fieldset affect the width of the combobox when it's not even being used? Is it a config issue?
I'm stumped and frustrated and looking for any help!

Answer 1

You are mixing properties for objects that you're not using... Try removing all the anchor properties. These only apply when you're using an anchor layout as your container. I would remove any absolute height and widths that you're setting for widgets and layouts. You can't mix columnWidth and width for instance when you're using a column layout. It's best to stay as consistent as possible with how you're handling widths for column and table layouts...
also: Use Ext.Panel instead of Container
//Account info (account dropdown + type dropdown)
var accountInfoGroup = new Ext.Panel({
autoEl: 'div',