Results 1 to 3 of 3

Thread: RadioGroup Change Event Fires Twice

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Vote Rating

    Default RadioGroup Change Event Fires Twice

    I posted this over on StackOverflow ( Probably should have brought it here first. Anyway, there's some suspicion that this is a bug.

    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() {
                 '#WheatChoice': {
                    change: this.onWheatChange
        onWheatChange: function(field, newVal, oldVal) {
            //this fires twice
            console.log('wheat change');
    Here's a fiddle example, showing this in action:

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    Yes, the change event fires because of the child radio fields... when one is unchecked the change event fires and when one is checked the change event fires. You can do one of two things (arguably maybe both).

    First option is to buffer the event firings so that it will only listen to one event within a certain amount of milliseconds. The change event should fire pretty fast and on my computer this will only listen to the second firing which is going to give you the new actual value:

        gr.on('change', function() {
        }, gr, { buffer : 50 });
    That will buffer the listeners and only fire the function once within 50 milliseconds.

    The other way is to check the 2nd argument to see if it is a new value. The 2nd argument is the new value and is an object. This isn't the easiest to determine as the first time it fires it will be an array with both the radio values in there. The second time, the one we want, is an object with the new value.

    Now, if you are using 4.1.0 b2 the change event should only be firing once so this doesn't apply.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Vote Rating


    I faced this too. I have used the following logic to prevent the unwanted code execution
    function radioChanged(fld)
          var val = fld.getValue();
           var rbVal = val['rb']; // rb is the form field name
          if( !Ext.isArray(rbVal) )  //old and new values make the first hit as an array, the second hit holds single value
            //rbVal is the newly selected radio button value, and this scope can be used for other processing                        

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts