extjs 4.2.1 - Radiogroup: add a radio button with a textbox

css, extjs, extjs4.2, html, javascript

Solution

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

Problem

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?

Original source