How to refer multiple radiogroup from a controller in Ext Js 4? - extjs

Question

I have a panel with 2 radiogroups. I am trying to bind change event to these items from a controller file. Don't want to use listeners config in view file.
In View file
items : [{
xtype:'radiogroup',
fieldLabel: 'Two Columns',
// Arrange radio buttons into two columns, distributed vertically
columns: 2,
id:'new_0',
vertical: true,
items: [
{ boxLabel: 'Item 1', name: 'rb1', inputValue: '1' },
{ boxLabel: 'Item 2', name: 'rb1', inputValue: '2', checked: true},
{ boxLabel: 'Item 3', name: 'rb1', inputValue: '3' },
{ boxLabel: 'Item 4', name: 'rb1', inputValue: '4' },
{ boxLabel: 'Item 5', name: 'rb1', inputValue: '5' },
{ boxLabel: 'Item 6', name: 'rb1', inputValue: '6' }
]
},
{
xtype:'radiogroup',
fieldLabel: 'Two Columns',
id:'new_1',
// Arrange radio buttons into two columns, distributed vertically
columns: 2,
vertical: true,
items: [
{ boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
{ boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
{ boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
{ boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
{ boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
{ boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
]
}],
And in the controller I am trying to bind the change event as follows:
refs : [
{
ref :'myradio',
selector:'radiogroup'
}],
Here its pointing to the 1st item and not binding the event for 2nd radiogroup. If am binding with ids its working fine. So the question is how I can bind change events to all radiogroup without passing ids in selector. Lets say inside a panle I have 2 radiogroup items and want to bind the change event to each radiogroup.
Thanks a ton in advance for your answers!!!!

Answer 1

What you could do is give each radiogroup an itemId instead of an id. Then in your controller you should be able to reference each radiogroup and bind all the events you want to each. So your controller should look something like this:
...
refs: [
{
autoCreate: true,
ref: 'firstbtngroup',
selector: '#firstbtngroup', // itemId for first radio group
xtype: 'Ext.form.RadioGroup'
},
{
autoCreate: true,
ref: 'secondbtngroup',
selector: '#secondbtngroup', // itemId for second radio group
xtype: 'Ext.form.RadioGroup'
}
],
onFirstbtngroupChange: function(field, newValue, oldValue, eOpts) {
console.log('Hey you...');
},
onSecondbtngroupEnable: function(component, eOpts) {
console.log('Hey there again...');
},
onFirstbtngroupAfterRender: function(component, eOpts) {
console.log('Dude I just renedered.');
},
onSecondbtngroupDestroy: function(component, eOpts) {
console.log('Why would you destroy me!!!');
},
init: function(application) {
this.control({
"#firstbtngroup": {
change: this.onFirstbtngroupChange,
afterrender: this.onFirstbtngroupAfterRender
},
"#secondbtngroup": {
enable: this.onSecondbtngroupEnable,
destroy: this.onSecondbtngroupDestroy
}
});
}
...