ExtJS - 设置组合框宽度的问题答案

【问题标题】：ExtJS - problem setting combobox widthExtJS - 设置组合框宽度的问题
【发布时间】：2010-09-03 05:35:08
【问题描述】：

让我先说我已经使用 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 声明突然被忽略，布局变得很不稳定。为了清楚起见，最初在字段集 sn-p 中有更多代码，但我可以将其全部取出并让 maxBoxWidth 正常工作，直到我尝试取出剩余的两个部分（默认值 > 锚点和项目 > accountTypeField） .

所以我的问题是，发生了什么事？为什么即使不使用该字段集也会影响组合框的宽度？是配置问题吗？

我很难过和沮丧，并寻求任何帮助！

【问题讨论】：

标签： combobox extjs

【解决方案1】：

您正在为不使用的对象混合属性...尝试删除所有锚属性。这些仅在您使用锚布局作为容器时适用。我会删除您为小部件和布局设置的任何绝对高度和宽度。例如，当您使用列布局时，您不能混合 columnWidth 和 width。最好尽可能与您处理列和表格布局宽度的方式保持一致...

也：使用 Ext.Panel 代替 Container

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

【讨论】：