Page 2 of 2 FirstFirst 12
Results 11 to 17 of 17

Thread: radiogroup change event fired twice

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #11
    Ext JS Premium Member
    Join Date
    Jul 2011


    Still happens in 4.0.6

  2. #12
    Sencha User
    Join Date
    Jul 2009
    The Netherlands


    Same here.

    This is really annoying. Does someone have a solution, possibly an override for this? Also, when will this bug be fixed?

  3. #13
    Ext JS Premium Member
    Join Date
    Jan 2010


    not a true fix, but you can buffer:

    listeners: {
    scope: this,
    change: {fn: this.onBtnCheck, buffer: 20}

    you'll only get 1 call; however, the oldVal shows the array, not the correct oldVal.

  4. #14
    Sencha Premium Member
    Join Date
    Sep 2011


    Believe it or not, I think the radiogroup is operating the way it's designed to (though I believe this is an example of usability taking a backseat to the demand that implementations be fully generic...) The 2 events are a reflection of the fact that there are actually 2 changes going on: the first is the state change that occurs when the user clicks a new radiobutton; the second is the state change that occurs when the RadioGroup's mutual-exclusion constraint logic kicks in to de-select the radiobutton that was previously checked. The following note in the documentation for Ext.form.RadioGroup.getValue is enlightening...

    NOTE: In Ext 3, this method returned an array of Checkbox components; this was changed to make it more consistent with other field components and with the setValue argument signature. If you need the old behavior in Ext 4+, use the getChecked method instead.

    While I understand the desire for consistency, in my opinion, working with something as inherently simple as a radio group shouldn't be so complicated. It's not just the multiple events. Another problem is that the types of the newSel and oldSel parameters in the 'change' handler differ from one call to the next. Another is the fact that the objects are keyed by a radiogroup name, which must be unique throughout the application. Thus, if the radiogroup is embedded in a form that might have multiple active instances, you have to uniquify the names somehow. If unique id's are required, I would prefer that Ext handle it transparently behind the scenes. It seems to me that if Ext is going to provide a RadioGroup class, it should also provide getValue/setValue methods that understand how RadioGroups work. The current interface is much more suited to independent checkboxes.

    At any rate, here's a method I wrote, which gives me easy access to the index of the selected radiobutton:
        // Convenience method that deciphers the mess provided to the RadioGroup's
        // 'change' handler, returning a single value representing the index of the
        // new selection, or null if we're in the transitional state in which 2
        // radio buttons are checked.
        getRationaleDisplayRadioGroup: function(newValue, oldValue) {
            var newSel = newValue[this.rationaleDisplayModeRadioName];
            // Note: newSel will be an Array only when we're in the transitional
            // state; don't react until RadioGroup logic has ensured only 1 button
            // checked.
            if (Ext.isArray(newSel))
                // Returning null tells caller we're in transitional state
                return null;
            return newSel;
    The following snippet from my notes gives the rationale...

    Ext's RadioGroup works in a rather complicated manner, given the inherent
    simplicity of radio buttons. In particular, when you change selections, you
    get 2 change events with the following input new/old values:
    Note: order of the elements in the array not specified and unimportant
    1st event:
    new: [ <old_sel_idx> <new_sel_idx> ]
    old: old_sel_idx
    2nd event:
    old: [ <old_sel_idx> <new_sel_idx> ]
    new: new_sel_idx
    Explanation: Ext is handling RadioButton clicks in 2 steps: the 1st is a
    transitional step, in which both old and new buttons are selected; after the
    2nd step, there's only 1 selection; hence, new selection is a single number.
    It was the 2nd event that was causing the problems in IE. The helper function
    I wrote to hide the Ext JS weirdness, getRationaleDisplayRadioGroup, didn't
    allow for the possibility that newSelArray might not be an array. The fact is
    that both old and new values can be either array or number.
    Fix: Allow for possibility that new value is a number. In fact, avoid reacting
    to the transitional event altogether by returning immediately if new sel is
    not a single number.
    Rationale: A radio group will always have a single new selection when it's not
    in a transitional state.
    Brett Stahlman

  5. #15
    Sencha Premium User
    Join Date
    Sep 2011
    Tamworth, NSW, Australia


    Thanks for posting the workaround, Brett. This is a remarkably stupid way that Ext JS handles radio button change events. I can't imagine why anybody would want to listen to the interim state when both are clicked, and to not even post some example code in the docs to help people cope with this insanity is an unfathomable oversight.

  6. #16
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Sydney, Australia


    FYI this issue has already been resolved for 4.1, seems this post is a dupe of another ticket.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  7. #17
    Sencha Premium Member
    Join Date
    Sep 2011


    No problem Marc. Glad you found it useful.

Page 2 of 2 FirstFirst 12

Similar Threads

  1. [BUG 3.1.x] RadioGroup as GridEditor: blur event not fired
    By franck34 in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 11 Aug 2011, 8:44 AM
  2. Combobox change event not fired at TabPanel
    By htammen in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 16 Dec 2010, 3:36 AM
  3. Radiogroup change event fired set to false - Shouldn't be!
    By catapult in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 22 Feb 2010, 6:45 AM
  4. Replies: 2
    Last Post: 17 Jun 2009, 7:02 PM

Posting Permissions

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