Définition d'une longueur d'étiquette personnalisée pour la mise en page dans EXTJS 4

Question

Je cherche à obtenir la propriété "fieldLabel:" de la zone textfield/checkbox pour avoir la priorité sur l'xtype, en termes de disposition. Comme vous pouvez le voir sur la capture d'écran ci-dessous, le texte semble écrasé.

Here's what it looks like at the moment. http://i68.tinypic.com/hv3ol5.png

Voici un extrait du code de mon point de vue:

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

Donc, essentiellement, le bouton permet une fois que la case est cochée.

J'ai besoin de cela pour avoir l'air un peu plus professionnel en privilégiant le texte, et en couvrant toute sa largeur avant que la case à cocher n'apparaisse - des idées? Pas intéressé par une disposition de colonne. Est-ce que ce sera possible? Merci d'avance.

Answer 1

Vous recherchez config labelWidth dans le champ case à cocher.

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