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 - 问题设置组合框宽度

回答

相关问题