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

【问题标题】：Ext JS 5 - Align radiogroup to the top of a multiline field labelExt JS 5 - 将 radiogroup 对齐到多行字段标签的顶部
【发布时间】：2018-02-01 16:00:41
【问题描述】：

我有一些带有长的多行字段标签的无线电组。我试图弄清楚如何让单选按钮组从容器顶部开始，与标签顶部对齐，而不是居中。假设这很容易，但无法弄清楚。布局的“对齐”属性似乎没有做任何事情。试图让这个对垂直和普通无线电组都有效，如小提琴所示。

sencha fiddle

【问题讨论】：

你能放一些你希望它如何工作的屏幕吗？光靠解释看不懂。
编辑了我想要实现的截图，谢谢

标签： javascript extjs alignment extjs6 radio-group

【解决方案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.：布局适用于单选按钮，但不适用于单选组。

【讨论】：