PDA

View Full Version : Multiple RadioGroup with radio with same name



lucasguaru
24 Aug 2011, 10:54 AM
I defined a screen which has a radio group and has two items inside with the same name.
I use it to edit the record and I can open more than one page at the same time.
When I open one page, the behavior is ok, because I just have the two radios with the same name.
The problem is when I open another page because I got four radios with the same name.
I thought the groupRadio would do this to me but I was wrong.
I saw there´s a RadioManager (singleton) who is responsible to get all the radios on the document, so it doens't see if the searched radio is inside the same radio group.
Any thoughts?

ValterBorges
24 Aug 2011, 10:59 AM
What do you mean you defined a screen.
The only time this happens to me is if my render Method gets called again after it's already rendered.

If a window/panel is already rendered rendering it again would duplicate components.

lucasguaru
24 Aug 2011, 11:29 AM
It´s something like this:


Ext.define('MyScreen', {
extend: 'Ext.form.Panel',
title: 'RadioGroup Example',
width: 300,
height: 125,
bodyPadding: 10,
renderTo: Ext.getBody(),
items:[{
xtype: 'radiogroup',
fieldLabel: 'Two Columns',
// Arrange radio buttons into two columns, distributed vertically
columns: 2,
vertical: true,
items: [
{ boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
{ boxLabel: 'Item 2', name: 'rb', inputValue: '2' }
]
}]
});

var screen1 = Ext.create('MyScreen');
var screen2 = Ext.create('MyScreen');

In my code, the screen's are tabs to edit records.
Thanks!

skirtle
27 Aug 2011, 1:41 AM
Interesting problem. Seems to be the same as this one:

http://www.sencha.com/forum/showthread.php?138657

Just had a quick stab at a fix. This ties the radio buttons to their form, something akin to how HTML works. You could always tweak it to respect radiogroups if you prefer.


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

Let me know if it works for you and I'll post it to the bug ticket.

Like your test case by the way, very clear.

lucasguaru
27 Aug 2011, 6:15 AM
Thanks for you reply Skirtle.

The problem is the same as you said. I didn't find it before.

Very good solution and it works very well. What about if we have more than one group at the same form with same name?
That's not my situation but I can have it sometime.

Thanks again!

skirtle
27 Aug 2011, 6:32 AM
If you wanted multiple groups within the same form you'd have to find some other way to identify which radio buttons belong to which group. I used a component query of 'form' but you can change that to something else, e.g. 'radiogroup'.

Greendrake
28 Nov 2011, 2:58 AM
Not f**king fixed in 4.0.7! >:)

I have updated the fix above so it fixes the setValue method as well:

Ext.form.field.Radio.override({
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);
}
},
setValue: function(v) {
var me = this,
active;
if (Ext.isBoolean(v)) {
me.callParent(arguments);
} else {
var form = this.up('form');
me.getManager().getWithValue(me.name, v).each(function(item) {
if (form === item.up('form')) {
item.setValue(true);
return false;
}
}, me);
}
return me;
}
});

rdahiya
20 Jan 2012, 11:39 AM
Has this issue been fixed yet or is this patch still the solution? Also, when adding patches like this, where should they be added in the code?

skirtle
20 Jan 2012, 6:18 PM
It does appear to have been fixed in 4.1.0-beta-1 but 4.0.7 is the last GA release and it wasn't fixed there.

The best place for the patch depends a little on your circumstances. Usually it's best to put patches immediately after you include the library. If you're dynamically loading the library then you'll probably need to add an explicit Ext.requires for RadioGroup and put the patch in the callback.

That said, I believe this patch would actually be quite forgiving if you included it much later in the process. So long as it's applied before you create the second RadioGroup I would expect it to work fine.