如何使用 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: right for labels and checkboxes in columns and receive following?

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'
                }]
            }]
        }]

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

How set float left configuration for items in columns of the fieldset using extJs?

extjs

fieldset

css-float