Ext JS 5 - Align radiogroup to the top of a multiline field label

Question

I have some radiogroups with long, multiline field labels. I'm trying to figure out how to get the group of radio buttons to start at the top of the container, aligned with the top of the label, instead of being centered. Assume this is easy but can't figure it out. The 'align' attribute of the layout doesn't seem to do anything. Trying to get this working for both vertical and normal radiogroups, as shown in the fiddle.

sencha fiddle

Answer 1

First, add new class ( customRadioGroup ) to your RadioGroup component:

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

And style component:

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

PS: Layout works with radiobuttons but not with radiogroups.