CODEWITHSUNDEEP
extjsextjs4extjs-mvc
the_skua
the_skua

Reputation: 1291

ExtJS 4 RadioGroup Change Event Fires Twice

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

Upvotes: 4

Views: 8140

Answers (4)

user204069
user204069

Reputation: 1081

Try this: 

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

Here myTransitionsRadio in my case, is the common name given to all radio buttons.

Thanks Nagendra

Upvotes: 0

jthurau
jthurau

Reputation: 447

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!

Upvotes: 5

user1202678
user1202678

Reputation: 51

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.

Upvotes: 4

Mike Thomsen
Mike Thomsen

Reputation: 37506

It might be getting fired because the initial value is being set and that triggers the event. Try adding a third radio element and see if it fires three times.

Upvotes: 0

Related Questions