ExtJS - проблема настройки ширины комбобокса

Question

Позвольте мне предвосхитить это, сказав, что я работаю с 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
        ]
     });

... объявление maxBoxWidth на accountTypeField внезапно игнорируется, и макет становится все шатким.Просто чтобы быть ясным, изначально во фрагменте fieldset было больше кода, но я мог бы вытащить весь его и сделать так, чтобы maxBoxWidth работал нормально, пока я не попытался извлечь эти две оставшиеся части (по умолчанию> anchor и items> accountTypeField).

Итак, мой вопрос: что происходит?Почему удаление этого набора полей влияет на ширину поля со списком, когда он даже не используется?Это проблема конфигурации?

Я в замешательстве и разочарован и ищу любую помощь!

Answer 1

Вы смешиваете свойства для объектов, которые вы не используете ... Попробуйте удалить все свойства привязки.Они применяются только в том случае, если вы используете якорный макет в качестве контейнера.Я бы удалил любую абсолютную высоту и ширину, которые вы устанавливаете для виджетов и макетов.Вы не можете смешивать columnWidth и width, например, когда используете макет столбца.Лучше оставаться максимально совместимым с тем, как вы обрабатываете ширину для макетов столбцов и таблиц ...

также: используйте Ext.Panel вместо Container

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