ExtJS - проблема установки combobox width

Question

Позвольте мне изложить это, сказав, что я работаю с ExtJS в течение всей недели и половины, поэтому, пожалуйста, прошу прощения за noobishness.

Я создаю форму внутри панели вкладок, и я тестировал разные способы компоновки двух сборок рядом друг с другом вместо укладки друг на друга. Моя первая попытка была с набором полей, но я отказался от этого для контейнера с макетом столбца.

Что привело меня к следующему коду:

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, 

    ] 
}); 
}); 

Это выглядело так, как я хотел, чтобы он, так что я начал возвращаться к очистке неиспользуемого кода Fieldset.

Это подводит меня к тупой части. Когда я раздеть этот раздел:

//Account info fieldset (account dropdown + type dropdown) 
    var accountInfo = new Ext.form.FieldSet({ 
     defaults: { 
      anchor: '-20' 
     }, 
     items :[ 
     accountTypeField 
     ] 
    }); 

... декларация maxBoxWidth на accountTypeField вдруг игнорируется и раскладка идет все шаткий. Чтобы быть ясным, вначале был фрагмент кода, но я мог взять все это и отлично работать с maxBoxWidth. UNTIL Я попытался извлечь эти две оставшиеся части (по умолчанию> anchor и items> accountTypeField).

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

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

Answer 1

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

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

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