如何使用extJs为字段集的列中的项目设置左浮置配置？

Question

我正在尝试将字段集中列的内容左对齐。代码如下：

items: [{
            xtype: 'fieldset',
            title: 'Level 1000',
            layout: 'column',
            width: '100%',
            items: [{
                xtype: 'fieldcontainer',
                width: '50%',
                items: [{
                    labelWidth: 'auto',
                    xtype: 'checkbox',
                    fieldLabel: 'State institutions',
                    name: 'IsTreasuryDepartments'
                }, {
                    labelWidth: 'auto',
                    xtype: 'checkbox',
                    fieldLabel: 'Autonomous Institutions',
                    name: 'IsAutonomousDepartmenys'
                }, {
                    labelWidth: 'auto',
                    xtype: 'checkbox',
                    fieldLabel: 'Other legal entity',
                    name: 'IsOtherJuridicalPerson'
                }, ]
            }, {
                xtype: 'fieldcontainer',
                width: '50%',
                items: [{
                    labelWidth: 'auto',
                    xtype: 'checkbox',
                    fieldLabel: 'Budgetary institutions',
                    name: 'IsBudgetDepartments'
                }, {
                    labelWidth: 'auto',
                    xtype: 'checkbox',
                    fieldLabel: 'Unitary enterprise',
                    name: 'IsUnitaryEnterprise'
                }]
            }]
        }

结果：

我已尝试为每个项目使用labelAlign：'right'或labelStyle：'float：right'，但这是行不通的。如何设置float：适合列中的标签和复选框并接收以下内容？

Answer 1

您需要用数字值定义width或labelWidth。

示例：

{
  xtype: "fieldset",
  title: "Level 1000",
  layout: "column",
  width: "100%",
  items: [{
      xtype: "fieldcontainer",
      width: "50%",
      defaults: {
          width: 300
      },
      items: [{
          labelWidth: "auto",
          xtype: "checkbox",
          fieldLabel: "State institutions",
          name: "IsTreasuryDepartments"
      }, {
          labelWidth: "auto",
          xtype: "checkbox",
          fieldLabel: "Autonomous Institutions",
          name: "IsAutonomousDepartmenys"
      }, {
          labelWidth: "auto",
          xtype: "checkbox",
          fieldLabel: "Other legal entity",
          name: "IsOtherJuridicalPerson"
      }, ]
  }, {
      xtype: "fieldcontainer",
      width: "50%",
       defaults: {
          width: 300
      },
      items: [{
          labelWidth: 130,
          xtype: "checkbox",
          fieldLabel: "Budgetary institutions",
          name: "IsBudgetDepartments"
      }, {
          labelWidth: 130,
          xtype: "checkbox",
          fieldLabel: "Unitary enterprise",
          name: "IsUnitaryEnterprise"
      }]
  }]
}

https://fiddle.sencha.com/#view/editor&fiddle/327j上的示例

Answer 2

就我而言，以下内容：

        items: [{
            xtype: 'fieldset',
            title: 'Level 1000',
            layout: 'column',
            width: '100%',
            items: [{
                xtype: 'checkboxgroup',
                layout: 'vbox',
                width: '50%',
                layout: 'vbox',
                defaults: {
                    labelAlign: 'right',
                    labelWidth: 170
                },
                items: [{
                    xtype: 'checkbox',
                    fieldLabel: 'State institutions',
                    name: 'IsTreasuryDepartments'
                }, {
                    xtype: 'checkbox',
                    fieldLabel: 'Autonomous Institutions',
                    name: 'IsAutonomousDepartmenys'
                }, {
                    xtype: 'checkbox',
                    fieldLabel: 'Other legal entity',
                    name: 'IsOtherJuridicalPerson'
                }, ]
            }, {
                xtype: 'checkboxgroup',
                layout: 'vbox',
                width: '50%',
                defaults: {
                    labelAlign: 'right',
                    labelWidth: 170
                },
                items: [{
                    xtype: 'checkbox',
                    fieldLabel: 'Other legal entity sdfsd',
                    name: 'IsBudgetDepartments'
                }, {
                    xtype: 'checkbox',
                    fieldLabel: 'Unitary enterprise',
                    name: 'IsUnitaryEnterprise'
                }]
            }]
        }]