Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: RadioGroups broken in 4.0.2

Hybrid View

Previous Post Previous Post   Next Post Next Post
    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
      0  

    Exclamation 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 - Engineering Operations mike.estes's Avatar
    Join Date
    Mar 2011
    Location
    Redwood City, CA
    Posts
    221
    Vote Rating
    9
      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,790
    Vote Rating
    390
      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
      0  

    Default

    @skirtle:

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

  5. #5
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,104
    Vote Rating
    102
      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 - Engineering Operations mike.estes's Avatar
    Join Date
    Mar 2011
    Location
    Redwood City, CA
    Posts
    221
    Vote Rating
    9
      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
    Sencha Premium Member
    Join Date
    Nov 2012
    Location
    Bangalore
    Posts
    79
    Vote Rating
    1
      0  

    Default

    I am new to extjs ,

    can you tell where to place the overridden code ?


    Quote Originally Posted by skirtle View Post
    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);
            }
        }
    });

  8. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,790
    Vote Rating
    390
      0  

    Default

    @rupamkhaitan. This has been fixed since 4.1. The influence of radio buttons should now be restricted to their surrounding Ext.form.Panel.

  9. #9
    Sencha Premium Member
    Join Date
    Nov 2012
    Location
    Bangalore
    Posts
    79
    Vote Rating
    1
      0  

    Default

    But I am still facing this issue in 4.2?

    I have a component which is called 4 times inside a page, and when i click on radio item of componen1, it basically goes an uncheck the radios of other component as well.

  10. #10
    Sencha User
    Join Date
    Oct 2015
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Sorry to bump an old thread, but as others suggested, I believe this bug still exists in 5.1.0. I am easily able to reproduce it. Furthermore, I believe if you provide the override that @skirtle suggested. It will make radio buttons which are *part of a form* behave incorrectly (so it fixes radio buttons NOT in a form but breaks radio buttons IN a form). That is because me.getManager().getByName() takes 2 arguments: the name of the radio button and the formId. Can someone please confirm this?

Page 1 of 2 12 LastLast

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
  •