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
        ]
     });

... accountTypeField上的maxBoxWidth声明突然被忽略，布局变得很糟糕。为了清楚起见，最初在fieldset片段中有更多的代码，但是我可以把它全部拿出并让maxBoxWidth正常工作直到我试图取出剩下的两个部分（默认值＆gt;锚点和项目＆gt; accountTypeField）

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

我很难过，感到很沮丧并寻找任何帮助！

Answer 1

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

另外：使用Ext.Panel而不是Container

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

ExtJS - 问题设置组合框宽度

1 个答案: