Ext JS 5 - 将radiogroup对齐到多行字段标签的顶部

Question

我有一些带有长多行字段标签的放射性组。我试图弄清楚如何让单选按钮组从容器顶部开始，与标签顶部对齐，而不是居中。假设这很容易，但无法弄清楚。 ＆＃39;对齐＆＃39;布局的属性似乎没有做任何事情。试图让它适用于垂直和正常的无线电组，如小提琴所示。

sencha fiddle

Answer 1

首先，在您的customRadioGroup组件中添加新课程（RadioGroup）：

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

风格组件：

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

P.S。：布局适用于无线电按钮，但不适用于无线电组。