Ext JS 5 - Aligner le radiogroupe en haut d'une étiquette de champ multiligne

Question

J'ai quelques radiogroupes avec de longues étiquettes de champs multilignes. J'essaie de comprendre comment faire pour que le groupe de boutons radio commence au sommet du conteneur, aligné avec le haut de l'étiquette, au lieu d'être centré. Supposons que c'est facile, mais ne peut pas le comprendre. L'attribut 'align' de la mise en page ne semble pas faire quoi que ce soit. Essayer de faire fonctionner ceci pour les radiogroupes verticaux et normaux, comme indiqué dans le violon.

sencha fiddle

Answer 1

En premier lieu, ajouter une nouvelle classe (customRadioGroup) à votre RadioGroup composant:

var RG2 = Ext.create({ 
     xtype: 'radiogroup', 
     componentCls: 'customRadioGroup', // new class to identify RadioGroup 
     fieldLabel: 'more lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text ', 
     items: [ 
      { boxLabel: 'Item 1', name: 'rb', inputValue: '1' }, 
      { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true}, 
      { boxLabel: 'Item 3', name: 'rb', inputValue: '3' }, 
      { boxLabel: 'Item 4', name: 'rb', inputValue: '4' }, 
      { boxLabel: 'Item 5', name: 'rb', inputValue: '5' }, 
      { boxLabel: 'Item 6', name: 'rb', inputValue: '6' } 
     ] 
    }); 

Et composant style:

.customRadioGroup .x-form-item-body { 
    vertical-align: top; 
} 

P.S .: Mise wo rks avec des radiobuttons mais pas avec des radiogroupes.