ExtJS - problem setting combobox width

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',