ExtJS - 問題設置組合框寬度

讓我先說這個，說我一直在使用ExtJS所有的一週和一半時間，所以請原諒那些不好的事情。ExtJS - 問題設置組合框寬度

我正在建立一個表格內的一個標籤面板，我正在測試不同的方式來並排擺放兩個組合框，而不是堆疊在彼此的頂部。我第一次嘗試使用fieldset，但是我放棄了使用列布局的容器。

害得我下面的代碼：

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聲明突然被忽略，並且佈局變得不可靠。需要說明的是，最初在fieldset片段中有更多的代碼，但我可以把它全部拿出來，讓maxBoxWidth工作正常，直到我試圖取出剩下的兩塊（默認值> anchor和items> accountTypeField）。

所以我的問題是，發生了什麼事？爲什麼刪除該字段集會影響組合框甚至未被使用時的寬度？它是一個配置問題？

我很難過，感到沮喪，並尋求任何幫助！

來源

2010-09-03 Nicrose

您正在混合您未使用的對象的屬性...嘗試刪除所有錨定屬性。這些僅適用於將錨點佈局用作容器的情況。我將刪除您爲小部件和佈局設置的絕對高度和寬度。例如，當您使用列布局時，不能混合columnWidth和width。最好是保持儘可能與列和表的佈局，你是如何處理寬度爲一致...

也：使用Ext.Panel代替集裝箱

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

來源

2010-09-08 05:25:07

ExtJS - 問題設置組合框寬度

回答

相關問題