分享关于Extjs2.0中RadioGroup和CheckboxGroup控件的取值和赋值问题

搞了两天，都没有搞定RadioGroup的取值和赋值问题，很是窝火。先贴上我的RadioGroup。

var radio1 = new Ext.form.RadioGroup({
name : 'radioName',
boxLabel : '第一个radio',
inputValue : '0',
id: 'radio1',
checked : true,
listeners : {}
});

var radio2 = new Ext.form.RadioGroup({
name : 'radioName',
boxLabel : '第二个radio',
inputValue : '1',
id: 'radio2',
checked : false,
listeners : {}
});

var radio3 = new Ext.form.RadioGroup({
name : 'radioName',
boxLabel : '第三个radio',
inputValue : '1',
id: 'radio3',
checked : false,
listeners : {}
});

var searchForm = new Ext.FormPanel({
frame : true,
labelAlign : 'right',
layout : "form",
labelWidth : 80,
border : false,
items : [radio1,radio2,radio3]
});

直接用 var radioValue = document.ElementById().checked; 可以取到值，但searchForm.getForm().findField(‘radio2').setValue(true); 或 searchForm.findById

('radio2').setValue(true); 都是赋不了值的，可能是Extjs2.0的一个BUG.

终于忍不住请教了公司的老鸟，原来需要重写Ext.form.BasicForm的findField方法，才能取得radiogroup和checkboxgroup控件。该重写方法如下：

Ext.override(Ext.form.BasicForm, {
findField : function(id) {
var field = this.items.get(id);
if (!field) {
this.items.each(function(f) {
if (f.isXType('radiogroup') || f.isXType('checkboxgroup')) {
f.items.each(function(c) {
if (c.isFormField
&& (c.dataIndex == id || c.id == id || c
.getName() == id)) {
field = c;
return false;
}
});
}

if (f.isFormField
&& (f.dataIndex == id || f.id == id || f.getName() == id)) {
field = f;
return false;
}
});
}
return field || null;
}
});

需要取得radiogroup和checkboxgroup的时候，就要引入该方法，我的做法是把该方法放到一个override.js的文件里面，用到的时候就引入。其实上述方法只是取得radiogroup

和checkboxgroup控件对象，要想对其取值和赋值，还需要到重写他们的setValue和getValue方法。如下：

/*
* 重写checkgroup的setValue和getValue方法
*
* 对checkgroup赋值：
* checkgroupObj.setValue(value);
* value = 用","或"|"隔开的值

*
* 对checkgroup取值：
* var value = checkgroupObj.getValue();
* value = 用","隔开的字符串
*  */
Ext.override(Ext.form.CheckboxGroup, {
//在inputValue中找到定义的内容后，设置到items里的各个checkbox中　　　
setValue : function(value) {

value = value == undefined ? "" : value;
this.items.each(function(f) {

if (value.indexOf(f.inputValue) != -1) {

f.setValue(true);
} else {

f.setValue(false);
}
});
},
//以value1,value2的形式拼接group内的值　　
getValue : function() {
var re = "";
this.items.each(function(f) {
if (f.getValue() == true) {
re += f.inputValue + ",";
}
});
return re.substr(0, re.length - 1);
},
//在Field类中定义的getName方法不符合CheckBoxGroup中默认的定义，因此需要重写该方法使其可以被BasicForm找到　　
getName : function() {
return this.name;
}
});

Ext.override(Ext.form.RadioGroup, {
getName : function() {

return this.items.first().name;
},
getValue : function() {
var v;
if (this.rendered) {
this.items.each(function(item) {
if (!item.getValue())
return true;
v = item.getRawValue();
return false;
});
} else {
for (var k in this.items) {
if (this.items[k].checked) {
v = this.items[k].inputValue;
break;
}
}
}
return v;
},
setValue : function(v) {

if (this.rendered)
this.items.each(function(item) {
item.setValue(item.getRawValue() == v);
});
else {
for (var k in this.items) {
this.items[k].checked = this.items[k].inputValue == v;
}
}
}

});

写这篇文章希望起到一个抛砖引玉的作用，只是给这个思路。作者只实现了对RadioGroup的取值和赋值操作，读者有兴趣的话，按照以上的重写方法自己去实现对

CheckboxGroup的取值和赋值操作。