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

Question

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?

Answer 1

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