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
    36,780
    Vote Rating
    833
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi