论坛首页 Web前端技术论坛

Ext Checkbox group表单提交

浏览 4489 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-02-23   最后修改:2010-01-11
1 对于类型是checkboxgroup的数据,数据库中保存数据的格式是value1,value2...valueN,其中1~N的数据有可能不存在,如果选中则存在,最后拼接成一个串。
在Ext中,通过Record对象向FormPanel中的内置对象BasicForm加载数据时,采用的是setValues方法,而setValues第一步要通过Record中定义的name使用findField方法找到表单元素,遗憾的是,继承了Field的checkboxgroup组件并不能正确的通过getName返回自身引用,所以,需要对getName方法进行重写,此外,为了适应我们采用的数据格式,对于该组件的setValue(被setValues调用)和getValue(获取到已加工的数据,此事后话)也要进行重写。故而对于形如:
                 {  
	                   xtype: 'checkboxgroup',
	                   name: 'biztype',  
	                   width: 220,
	                   columns: 3,
	                   fieldLabel: '业务类别',
	                   items: [  
	                       {boxLabel: '类别1', inputValue: '01'},  
	                       {boxLabel: '类别2', inputValue: '02'},  
	                       {boxLabel: '类别3', inputValue: '03'},  
	                       {boxLabel: '类别4', inputValue: '04'}  
	                       ]  
	                 }

的checkboxgroup定义,需重写类如下:

Ext.override(Ext.form.CheckboxGroup,{ 
	//在inputValue中找到定义的内容后,设置到items里的各个checkbox中 
	setValue : function(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;
	}
});


2 通过内置对象basicForm的getValues方法可以获取到一个form的完整json数据,但遗憾的事,这里取到的是dom的raw数据,类似emptyText的数据也会被返回,而Field的getValue方法不存在这个问题,所以如果想要返回一个非raw的json集合,可以给formpanel添加如下方法:
	getJsonValue:function(){
		var param = '{';
		this.getForm().items.each(function(f){
			var tmp = '"' + f.getName() + '":"' + f.getValue() + '",';
			param +=  tmp;
		});
		param = param.substr(0,param.length - 1) + '}';
		return param;
	}

这个方法同样适用于上面定义的checkboxgroup,如此就可以把前后台的数据通过json统一起来了
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics