Setting a custom label length for form layout in EXTJS 4

Question

I am looking to get the "fieldLabel:" property of the textfield/checkbox to take priority over the xtype, in terms of layout. As you can see in the screen shot below, the text appears squished.

Here's a snippet of the code from my view:

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

So, essentially, the button enables once the box is ticked.

I need this to look a little more professional by the text taking priority, and spanning it's full width before the checkbox appears - any ideas? Not interested in a column layout. Is this going to be possible? Thanks in advance.

pagep pagep · Accepted Answer · 2016-11-30T16:31:47

You are looking for config labelWidth in the checkbox field.

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

Setting a custom label length for form layout in EXTJS 4

1 Answers