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

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!!!!

cclerv cclerv · Accepted Answer · 2013-04-29T16:46:35

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
            }
        });
    }
    ...

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

1 Answers