PDA

View Full Version : [FIXED] RadioGroups broken in 4.0.2



stefankendall
28 Jun 2011, 6:43 AM
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:






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.

mike.estes
28 Jun 2011, 3:09 PM
@stefankendall, thank you for the report, could you update the formatting of the report to use this template (http://www.sencha.com/forum/showthread.php?138165-How-to-report-a-bug)? This will help us process the report faster, thanks in advance.

skirtle
27 Aug 2011, 6:52 AM
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.


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);
}
}
});

stefankendall
27 Aug 2011, 8:00 PM
@skirtle:

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

SebTardif
12 Sep 2011, 7:07 AM
We had the same problem and are now using the fix from skirtle. This bug is still not yet regognized by Sencha.

mike.estes
12 Sep 2011, 7:49 AM
@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.

scancubus
15 Sep 2011, 6:25 AM
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!

skirtle
15 Sep 2011, 6:40 AM
@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.

c2c-guinness
25 Oct 2011, 4:56 PM
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.

adrianmirjan
31 Oct 2011, 9:13 AM
Still broken in 4.0.6
I desperately looking this to be fixed in 4.1

Thanks to skirtle (http://www.sencha.com/forum/member.php?197255-skirtle)!

rupamkhaitan
30 Apr 2013, 12:19 AM
I dont see its fixed in 4.2 as well.

i am using extjs 4.2 and having same problem.

rupamkhaitan
30 Apr 2013, 12:33 AM
I am new to extjs ,

can you tell where to place the overridden code ?



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.


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);
}
}
});

skirtle
30 Apr 2013, 2:35 AM
@rupamkhaitan. This has been fixed since 4.1. The influence of radio buttons should now be restricted to their surrounding Ext.form.Panel.

rupamkhaitan
1 May 2013, 2:03 AM
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.

rupamkhaitan
1 May 2013, 2:27 AM
i got the problem, i was attaching listener to same component id, so it was firing multiple times,

I have now fixed it by attaching listener to individual component with their own ID

rich4756
18 Mar 2016, 10:28 AM
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?

Gary Schlosberg
18 Mar 2016, 12:51 PM
I placed the original test case into this Fiddle:
https://fiddle.sencha.com/#fiddle/17ef

I'm not able to reproduce the issue. Do you see the issue in this test case? If so, with which browser are you seeing it? If not, can you please post a test case which reproduces the issue in 5.1.0?
https://fiddle.sencha.com/#home