分享关于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的取值和赋值操作。