ExtJS 4 RadioGroup Change Event Fires Twice

Question

I'm using ExtJS 4.0.7, am new to Ext, and am using the new MVC architecture. I have a RadioGroup that, upon change, I want to use to reveal more UI elements. The problem is, that the change event fires twice for the RadioGroup. I'm assuming this is because both Radios fire an event for having their values change.

Is there a way to listen for a change to either the RadioGroup or Radios with the same name that will fire only once? In my experience with jQuery and Flex, I would expect a RadioGroup to only fire once.

Here's the RadioGroup code in my view:

items: [{
    xtype: 'radiogroup',
    id: 'WheatChoice',
    padding: '',
    layout: {
        padding: '-3 0 4 0',
        type: 'hbox'
    },
    fieldLabel: 'Choose Model',
    labelPad: 5,
    labelWidth: 80,
    allowBlank: false,
    columns: 1,
    flex: 1,
    anchor: '60%',
    items: [
        { xtype: 'radiofield', id: 'SpringWheat', padding: '2 10 0 0', fieldLabel: '', 
          boxLabel: 'Spring', name: 'wheat-selection', inputValue: '0', flex: 1 },
        { xtype: 'radiofield', id: 'WinterWheat', padding: '2 0 0 0', fieldLabel: '',
          boxLabel: 'Winter', name: 'wheat-selection', inputValue: '1', checked: true, flex: 1 }
     ]
}]

Here's the relevant code in my Controller:

init: function() {
     this.control({
         '#WheatChoice': {
            change: this.onWheatChange
         }
     });
},

onWheatChange: function(field, newVal, oldVal) {
    //this fires twice
    console.log('wheat change');
}

Answer 1

http://www.sencha.com/forum/showthread.php?132176-radiogroup-change-event-fired-twice/page2

evant says this will be fixed with 4.1, so it's definitely a bug.

However, you can deal with the situation pretty easily:

//borrowing your function
onWheatChange: function(rg, sel) {
    var selection = sel['wheat-selection'];

    if (!(selection instanceof Object)) {
        alert(selection);
    }

}  

var selection will be the new value. I know it doesn't solve the two event firing problem, but hopefully this helps!

Answer 2

The reason it fires twice is because your radio group has two changes happening.

A radio button is changing from checked=true to checked=false and then your newly clicked radio button is changing from checked=false to checked=true. This should really be an expected thing.

What if you wanted to do something when a radio button was no longer checked? You'd miss that entire event. Really you should just be doing a check on your listener function to only listen for the radio button that has checked=true.