ExtJS 4 RadioGroup change event fires twice

Question

I am using ExtJS 4.0.7, new to Ext, and using the new MVC architecture. I have a RadioGroup, which, after a change, I want to use to show more user interface elements. The problem is that the change event is fired twice for RadioGroup. I assume this is because both Radios fire an event to change their values.

Is there a way to listen to changes in RadioGroup or Radios with the same name that will only fire once? In my experience with jQuery and Flex, I expected RadioGroup to only start once.

Here is the RadioGroup code in my opinion:

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 is the corresponding 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 this is definitely a bug.

However, you can easily handle the situation:

 //borrowing your function onWheatChange: function(rg, sel) { var selection = sel['wheat-selection']; if (!(selection instanceof Object)) { alert(selection); } } 

Choosing var will be the new value. I know this does not solve the problem with two events, but hopefully it helps!

Answer 2

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

The switch switches from checked=true to checked=false , and then your new click switches from checked=false to checked=true . This really should be the expected thing.

What if you want to do something when the radio button has not been checked anymore? You will miss this event. In fact, you just need to check the listener function to listen only to the radio button with checked=true .

Answer 3

This can be fired because the initial value is set and fires the event. Try adding a third radio element and see if it fires three times.

Answer 4

Try the following:

 change : function(thisFormField, newValue, oldValue, eOpts) { if (!Ext.isArray(newValue.myTransitionsRadio)) { // Code goes here. } 

Here myTransitionsRadio in my case is the common name assigned to all the switches.

Thanks Nagendra