Bug in Ext.form.Radio setValue?

[bradyisom]

I have a set of individual radio buttons (not in a radio group). A part of the code is below:



xtype: 'fieldset',
title: 'Type',
forceLayout: true,
autoHeight: true,
hideLabels: true,
items: [{
xtype: 'radio',
id: 'qTypeChoice',
inputValue: 'choice',
name: 'qtype',
boxLabel: 'Mulitple Choice',
listeners: {
check: changeQuestionTypeCheck
}
}, {
xtype: 'radio',
inputValue: 'text',
name: 'qtype',
boxLabel: 'Short Answer',
listeners: {
check: changeQuestionTypeCheck
}
}, {
xtype: 'radio',
inputValue: 'essay',
name: 'qtype',
boxLabel: 'Essay',
listeners: {
check: changeQuestionTypeCheck
}
}, {
xtype: 'radio',
inputValue: 'match',
name: 'qtype',
boxLabel: 'Matching',
listeners: {
check: changeQuestionTypeCheck
}
}, {
xtype: 'radio',
inputValue: 'answer',
name: 'qtype',
boxLabel: 'Multiple Answer',
listeners: {
check: changeQuestionTypeCheck
}
}]

My changeQuestionTypeCheck function is called just fine when the user clicks on the radio buttons. However, when I make something like the following call from code:


Ext.getCmp('qTypeChoice').setValue('answer');

the "checked" property on the DOM does not get cleared on sibling radio buttons and results in a bug similar to http://extjs.com/forum/showthread.php?t=39991. It seems like the setValue function of Ext.form.Radio should be something like the following to match the behavior of the onClick function:


Ext.override(Ext.form.Radio, {
setValue : function(v){
if (typeof v == 'boolean') {
Ext.form.Radio.superclass.setValue.call(this, v);
} else {
var els = this.getCheckEl().select('input[name=' + this.el.dom.name + ']');
els.each(function(el){
if(el.dom.value == v){
Ext.getCmp(el.dom.id).setValue(true);
}else{
Ext.getCmp(el.dom.id).setValue(false);
}
}, this);
}
return this;
}
});

[Starving Poet]

I had the same problem - if a radio button's value was changed using setValue - it wouldn't trigger the first check event when trying to change it to a different value in the group.

I slightly modified your override to only use Ext native functions - works like a charm



Ext.override(Ext.form.Radio,
{
setValue : function(v)
{
if (typeof v == 'boolean')
{
Ext.form.Radio.superclass.setValue.call(this, v);
}
else
{
var els = Ext.DomQuery.select('input[name=' + this.el.dom.name + ']');
for (var i in els)
{
var cmp = Ext.getCmp(els[i].id);

if (typeof(cmp) != 'undefined' && cmp !== null)
{
if(el.value == v)
{
cmp.setValue(true);
}
else
{
cmp.setValue(false);
}
}
}
}
return this;
}
});

[lukas]

The final patch is:



Ext.override(Ext.form.Radio, {
setValue : function(v){
if (typeof v == 'boolean') {
Ext.form.Radio.superclass.setValue.call(this, v);
} else if (this.rendered) {
var r = this.getCheckEl().child('input[name=' + this.el.dom.name + '][value=' + v + ']', true);
if(r){
Ext.getCmp(r.id).setValue(true);
}
}
return this;
},

});

[tobiu]

i had serious problems with ext-radios in 3.0.3 too and this fix works like a charm. this topic should go to bugreports.

you should remove the "killing comma" for ie though ;)



Ext.override(Ext.form.Radio, {
setValue : function(v){
if (typeof v == 'boolean') {
Ext.form.Radio.superclass.setValue.call(this, v);
} else if (this.rendered) {
var r = this.getCheckEl().child('input[name=' + this.el.dom.name + '][value=' + v + ']', true);
if(r){
Ext.getCmp(r.id).setValue(true);
}
}
return this;
}->,<-

});


kind regards, tobiu

[wzylinski]

I had a problem with the setValue on Radio component today. Problem was, my field's name has brackets and it's value can be null. The selector used by ext breaks in that case. I had to replace it with:


var r = this.getCheckEl().child('input[name="' + this.el.dom.name + '"][value="' + v + '"]', true);

I also had to change the selector in the onClick method:


var els = this.getCheckEl().select('input[name="' + this.el.dom.name + '"]');

[vot]

Problem still exists in 3.2.1. The first patch from bradyisom seems to be the correct one:


Ext.override(Ext.form.Radio, {
setValue : function(v) {
if (typeof v == 'boolean') {
Ext.form.Radio.superclass.setValue.call(this, v);
} else if (this.rendered) {
var els = this.getCheckEl().select('input[name=' + this.el.dom.name + ']');
els.each(function(el){
if (el.dom.value == v) {
Ext.getCmp(el.dom.id).setValue(true);
} else {
Ext.getCmp(el.dom.id).setValue(false);
}
}, this);
}
return this;
}
});

[aw1zard2]

Confirmed bug in Ext JS 3.2.1 and Ext Js 3.3.0 Beta 2.

The above patch doesn't fix the check event not getting called.

If I change my radio buttons with check boxes the event is called all the time.

If needed, I can post some test code.

For a fast example you can add a handler to the radio buttons in the form examples and just set an alert to be called everytime you change radios. And add a button that calls the setValue() of a radio.

[sabilfikri]

had a problem with this issue as well. Ext.form.RadioGroup.setValue('id',true) is not working for me. any fix on this?

Im using ext 3.3.1