In my UI, I have a single-select RadioGroup with a few options to choose from. One of the options will contain a textfield that the user can enter input into like this:
() Option A
() Option B
() Other (Please specify) ____
How would I add something like this to a RadioGroup?
For creating layout of Other option you can use container component with hbox layout. This component will have two items. First item will be radio and the second item will be textfield.
For creating space between radio and textfield components you can use 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'
}
]
}
]
}
Fiddle with live example: https://fiddle.sencha.com/#fiddle/2kj
