1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    24
    Vote Rating
    0
    the_skua is on a distinguished road

      0  

    Default RadioGroup Change Event Fires Twice

    RadioGroup Change Event Fires Twice


    I posted this over on StackOverflow (http://stackoverflow.com/questions/9...nt-fires-twice). 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:


    Code:
        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:


    Code:
        init: function() {
             this.control({
                 '#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: http://jsfiddle.net/molecule/4sTQQ/

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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:

    Code:
        gr.on('change', function() {
            console.log(arguments);
        }, 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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    balaram_reddy is on a distinguished road

      0  

    Wink


    I faced this too. I have used the following logic to prevent the unwanted code execution
    Code:
    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                        
          }
    }

Thread Participants: 2

Tags for this Thread