4

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?

Dexygen
  • 12,287
  • 13
  • 80
  • 147
Android Noob
  • 3,271
  • 4
  • 34
  • 60

1 Answers1

11

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

Akatum
  • 3,976
  • 2
  • 18
  • 25
  • 2
    Doing like this, you will have troubles when setting the value of the radiogroup because its setValue method expects that its children are all radiofields. So you will have to override the radiogroup setValue method to suit your needs. – Gabriel Hautclocq Sep 25 '18 at 08:09