How do you load data for a radiogroup in extjs, such that the correct radios are checked?

On the extjs radio/checkbox example page you will find code like this

{
  xtype: 'radiogroup',
  fieldLabel: 'Auto Layout',
  items: [
       {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
       {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
       {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
       {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
       {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
   ]
 }

I would expect that doing a form.load() with json like {'rb-auto': 3, …} would mark Item 3 as checked. This doesn't work. How could you achieve this effect?

Answer: (Zach is correct about extjs 3.1) My expectation is correct, but only since extjs 3.1 is released recently. Also, you need to set the name on boh the individual radio items as the group itself:

{
  xtype: 'radiogroup',
  fieldLabel: 'Auto Layout',
  name: 'rb-auto',
  items: [
       {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
       {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
       {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
       {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
       {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
   ]
 }

How do you load data for a radiogroup in extjs, such that the correct radios are checked?

On the extjs radio/checkbox example page you will find code like this

{
  xtype: 'radiogroup',
  fieldLabel: 'Auto Layout',
  items: [
       {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
       {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
       {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
       {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
       {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
   ]
 }

I would expect that doing a form.load() with json like {'rb-auto': 3, …} would mark Item 3 as checked. This doesn't work. How could you achieve this effect?

Answer: (Zach is correct about extjs 3.1) My expectation is correct, but only since extjs 3.1 is released recently. Also, you need to set the name on boh the individual radio items as the group itself:

{
  xtype: 'radiogroup',
  fieldLabel: 'Auto Layout',
  name: 'rb-auto',
  items: [
       {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
       {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
       {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
       {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
       {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
   ]
 }

• javascript
• forms
• extjs

2 Answers 2

Using ExtJS 4, the following structure for radio group settings resulting in success for me:

{ "data" : 
    [ 
      { "id" : "RadioGroupName",
        "value" : 
            { "RadioGroupName" : "inputValue" }
      },
      { "id" : "RadioGroupName2",
        "value" : 
            { "RadioGroupName2" : "inputValue" }
      }
    ],
  "success" : true
}

This was a solution that was working for extjs 3.0: http://www.extjs./forum/showthread.php?t=39161

With 3.1 it doesn't work. :-(