在 EXTJS 4 中为表单布局设置自定义标签长度

Question

我希望 textfield/checkbox 的 "fieldLabel:" 属性在布局方面优先于 xtype。正如您在下面的屏幕截图中看到的，文本看起来被压扁了。

这是我认为的代码片段：

bodyPadding: 30,
    xtype: 'fieldset',
    title: 'Account',
    margin: '10 10 10 10',

items: [{
      xtype: 'form',
      layout: 'form',

items: [{
          xtype: 'checkboxfield',
          fieldLabel: 'Has registered for gift aid:',
          name: 'giftAidFlag',
          margin: '0 0 8 0',
          listeners: {
            change: function(cb, checked) {
              Ext.getCmp('manageGiftAidPayers').setDisabled(!checked)
            }
          }
        }, {
          xtype: 'button',
          anchor: '100%',
          text: 'Manage gift aid payers...',
          style: "width : 495px;",
          margin: '10 0 8 0',
          disabled: true,
          id: 'manageGiftAidPayers'
        }]
      }]

因此，从本质上讲，一旦框被勾选，按钮就会启用。

我需要它看起来更专业一些，因为文本优先，并且在复选框出现之前横跨它的全宽 - 有什么想法吗？对列布局不感兴趣。这可能吗？提前致谢。

Answer 1

您正在复选框字段中查找配置 labelWidth。

xtype: 'fieldset',
title: 'My Fields',
items: [
    {
        xtype: 'checkboxfield',
        fieldLabel: 'Has registered for gift aid:',
        labelWidth: 250,
        boxLabel: 'Box Label'
    },
    {
        xtype: 'button',
        width: 495,
        text: 'MyButton'
    }
]

在 EXTJS 4 中为表单布局设置自定义标签长度

Setting a custom label length for form layout in EXTJS 4

extjs

extjs4