Combobox ExtJS-设置组合框宽度时出现问题

Combobox ExtJS-设置组合框宽度时出现问题,combobox,extjs,Combobox,Extjs,让我先说一句,我已经和ExtJS一起工作了一个半星期了,所以请原谅我的无礼 我正在选项卡面板中构建一个表单,我正在测试不同的方法,将两个组合框并排放置,而不是堆叠在一起。我的第一次尝试是使用字段集,但我放弃了使用带有列布局的容器 这让我找到了以下代码: Ext.onReady( function() { var tabs = new Ext.TabPanel({ renderTo: 'myForm', activeTab: 0, autoHeight: true, header

让我先说一句,我已经和ExtJS一起工作了一个半星期了,所以请原谅我的无礼

我正在选项卡面板中构建一个表单,我正在测试不同的方法,将两个组合框并排放置,而不是堆叠在一起。我的第一次尝试是使用字段集,但我放弃了使用带有列布局的容器

这让我找到了以下代码:

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,

  ]
 }); 
});
这看起来是我想要的,所以我开始回去清理未使用的字段集代码

这让我想到了愚蠢的部分。当我去掉这一部分时:

//Account info fieldset (account dropdown + type dropdown)
     var accountInfo = new Ext.form.FieldSet({
      defaults: {
            anchor: '-20'
        },
        items :[
        accountTypeField
        ]
     });
…accountTypeField上的maxBoxWidth声明突然被忽略,布局变得非常不稳定。需要明确的是,最初在字段集片段中有更多的代码,但我可以去掉所有代码,并让maxBoxWidth正常工作,直到我尝试去掉剩下的两部分defaults>anchor and items>accountTypeField

所以我的问题是,到底发生了什么?为什么删除该字段集会影响组合框的宽度,而它甚至没有被使用?这是一个配置问题吗


我被难住了,很沮丧,正在寻求帮助

您正在混合未使用的对象的属性。。。尝试删除所有锚属性。这些仅适用于将锚点布局用作容器的情况。我会删除您为小部件和布局设置的任何绝对高度和宽度。例如,在使用列布局时,不能混合使用列宽和列宽。最好尽可能地与处理列和表布局的宽度保持一致

另外:使用外部面板而不是容器

 //Account info  (account dropdown + type dropdown)
 var accountInfoGroup = new Ext.Panel({
   autoEl: 'div',