Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-4012 in a recent build.
  1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    134
    Vote Rating
    1
    stefankendall is an unknown quantity at this point

      0  

    Exclamation RadioGroups broken in 4.0.2

    RadioGroups broken in 4.0.2


    I have multiple forms on the same page, and the radio buttons have the same names. They're somehow being grouped into the same radio group, even if I make the radio group name unique.

    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.0.0
    • Ext 4.0.2
    • Ext 4.0.2a


    Browser versions tested against:
    • IE9
    • FF5 (firebug 1.3.0.10 installed)
    • Chrome


    Description:
    • When multiple formpanels are put on the same page with radiogroups containing radio buttons of the same name, all radio buttons are associated to the same group. That is, clicking any radio button on the page toggles off *all* others, and not just the radio buttons in the single form.


    Steps to reproduce the problem:
    • Create multiple formpanels on one page with radio groups containing radio buttons that have the same name.

      Example items to include in two+ forms:
      {
      fieldLabel: 'My Label',
      xtype: 'radiogroup',
      name: 'myName',
      items: [
      {name: 'myName', boxLabel: "blah1", inputValue: 'false'},
      {name: 'myName', boxLabel: "blah2", inputValue: 'true'}
      ]
      }


    The result that was expected:
    • Radio groups would be isolated for each formpanel. Clicking a radio button within one form would only toggle all radio buttons in that same form.


    The result that occurs instead:
    • Toggling any radio button toggles all other radio buttons on the page.


    Test Case:

    Code:
    
    
    HELPFUL INFORMATION

    Screenshot or Video:
    • attached


    See this URL for live test case: http://


    Debugging already done:
    • This works on ExtJS3 latest


    Possible fix:
    • I'm currently working around this issue by using an integer unique prefix on all my radio button groups, then stripping off the numbers in a custom getValues function. This is clearly a hack, and the real solution probably won't have anything to do with this.


    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)


    Operating System:
    • Win 7, OSX latest

    This worked in ExtJS3, so it appears to be a regression.

  2. #2
    Sencha - Support Team mike.estes's Avatar
    Join Date
    Mar 2011
    Location
    Redwood City, CA
    Posts
    221
    Vote Rating
    9
    mike.estes will become famous soon enough

      0  

    Default


    @stefankendall, thank you for the report, could you update the formatting of the report to use this template? This will help us process the report faster, thanks in advance.

  3. #3
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,508
    Vote Rating
    288
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    To clarify, the issue is that for any 2 radio buttons with the same name it is only possible to select one of them, no matter where they appear in the page. In contrast, HTML allows forms to be used to partition radio buttons with the same name.

    One might expect either a radiogroup or a form panel to perform the role of partitioner in ExtJS but they do not.

    I have written an override to fix this problem, tested in 4.0.2 and 4.0.5. It follows the HTML convention of separating radio buttons by form but can easily be modified to use radiogroups.

    Code:
    Ext.apply(Ext.form.field.Radio.prototype, {
        onChange: function(newVal, oldVal) {
            var me = this;
            Ext.form.field.Radio.superclass.onChange.apply(this, arguments);
    
            if (newVal) {
                var form = this.up('form');
    
                this.getManager().getByName(me.name).each(function(item){
                    if (item !== me && form === item.up('form')) {
                        item.setValue(false);
                    }
                }, me);
            }
        }
    });

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Posts
    134
    Vote Rating
    1
    stefankendall is an unknown quantity at this point

      0  

    Default


    @skirtle:

    That could be useful. My hack workaround is absurdly more elaborate, less scalable, and terrible.

  5. #5
    Ext JS Premium Member SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    309
    Vote Rating
    9
    SebTardif will become famous soon enough

      0  

    Default


    We had the same problem and are now using the fix from skirtle. This bug is still not yet regognized by Sencha.

  6. #6
    Sencha - Support Team mike.estes's Avatar
    Join Date
    Mar 2011
    Location
    Redwood City, CA
    Posts
    221
    Vote Rating
    9
    mike.estes will become famous soon enough

      0  

    Default


    @stefankendall, thank you for the report. I created a test case and was able to confirm the bug in the latest dev branch. Going forward we do ask that when you are reporting a bug that you include a small test case that we can drop in and run quickly, we have a lot of bug reports to process daily and having to create test cases from scratch for each is not very efficient.

    @skirtle, thank you for including your fix.

  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    69
    Vote Rating
    0
    scancubus is on a distinguished road

      0  

    Default Same thing is happening to buttons in a toggle Group

    Same thing is happening to buttons in a toggle Group


    If you put two forms on a panel. Put two buttons as a toggleGroup. Even if their names are different, the buttons dont work correctly. If you click a button in group1, group2 will be completely unselected.

    Does anyone know how to override this until EXT can fix?

    I used the above radio override and it worked great but I don't understand enough about the button to do the same.

    Thanks!

  8. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,508
    Vote Rating
    288
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    @scancubus. I don't believe your issue is related to this bug.

    I think you should post your problem in the Q&A forum, including sample code. My suspicion is that there is a mistake in your code rather than a bug in ExtJS. If you really have found a bug then other members of the community should be able to confirm it and then you can file a proper bug report for it.

    I used the above radio override and it worked great but I don't understand enough about the button to do the same.
    I highly recommend reading the button source code as the only real way to learn. Using breakpoints can also be a great way to help better understand a component.

  9. #9
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    54
    Vote Rating
    0
    c2c-guinness is on a distinguished road

      0  

    Default


    lol .. while I agree that he could have posted a test case and that it would have helped, I also understand that he's not on staff at Sencha.

    I've reported bugs myself and most are ignored without a test case. Its a bit absurd that test cases are EXPECTED and at times REQUIRED when Sencha should simply appreciate that he cared enough to post the report in the first place. For my part, I post test cases when I have time.. and I don't when I don't have time.

    Although I am always glad to help as much as I can, I feel like bugs are Sencha's resposibility in the end.

    Thank you Stefan for reporting the bug.

  10. #10
    Ext JS Premium Member
    Join Date
    Jul 2011
    Posts
    46
    Vote Rating
    4
    adrianmirjan is on a distinguished road

      0  

    Default


    Still broken in 4.0.6
    I desperately looking this to be fixed in 4.1

    Thanks to skirtle!