extjs 4.2.1 - Radiogroup：添加带有文本框的单选按钮答案

【问题标题】：extjs 4.2.1 - Radiogroup: add a radio button with a textboxextjs 4.2.1 - Radiogroup：添加带有文本框的单选按钮
【发布时间】：2014-01-13 19:13:50
【问题描述】：

在我的 UI 中，我有一个单选 RadioGroup，其中有几个选项可供选择。其中一个选项将包含一个文本字段，用户可以像这样输入输入：

() Option A
() Option B
() Other (Please specify) ____

如何将这样的内容添加到 RadioGroup？

【问题讨论】：

标签： javascript html css extjs extjs4.2

【解决方案1】：

要创建“其他”选项的布局，您可以使用 container 组件和 hbox 布局。该组件将有两个项目。第一项是radio，第二项是textfield。

要在radio 和textfield 组件之间创建空间，您可以使用splitter。

{
    xtype: 'radiogroup',
    fieldLabel: 'Choose',
    columns: 1,
    vertical: true,
    items: [
        { boxLabel: 'Option 1', name: 'rb', inputValue: '1' },
        { boxLabel: 'Option 2', name: 'rb', inputValue: '2' },
        {
            xtype: 'container',
            layout: 'hbox',
            items: [
                { 
                    xtype: 'radio',
                    boxLabel: 'Other (Please specify)', 
                    name: 'rb', 
                    inputValue: '3' 
                },
                {
                    xtype: 'splitter'
                },                            
                {
                    xtype: 'textfield',
                    name: 'option3detail'

                }
            ]
        }              
    ]
}

摆弄现场示例：https://fiddle.sencha.com/#fiddle/2kj

【讨论】：

这样做，在设置radiogroup的值时会遇到麻烦，因为它的setValue方法期望它的孩子都是radiofields。因此，您必须重写 radiogroup setValue 方法以满足您的需求。