对Ext中CheckBox的扩展

 

使用Ext中的Checkbox时，经常需要随form一起提交，但Checkbox设置的默认的提交值为"on"或""，后台代码中需要对字段的提交进行判断后取值，不符合我们通常的使用习惯，即直接将提交的值转换为对应的boolean类型，为此，特进行扩展和封装，以满足通过的使用方式，代码如下：

 

	justgin.bap.CheckboxEx = Ext.extend(Ext.form.Checkbox, {
		trueValue: true,
		falseValue: false,
		hiddenField: {value:''},
		
		onRender : function(ct, position){
	    	justgin.bap.CheckboxEx.superclass.onRender.call(this, ct, position);
	    	var hidden = this.el.insertSibling({tag:'input', type:'hidden', name: this.name}, 'before', true);
	    	hidden.value = this.hiddenField.value;
	    	this.hiddenField = hidden;
	    	this.el.dom.removeAttribute('name');
	    	this.on('check', this.onCheck);
	    },
	    
	    setValue : function(v){
	    	var me = this;    	
	    	justgin.bap.CheckboxEx.superclass.setValue.call(this, v);
	    	this.hiddenField.value = this.checked?me.trueValue:me.falseValue;
	    },
	   
	    getValue : function(v){
	    	return this.hiddenField.value;
	    },
	   
	    onDestroy : function(){
	        Ext.destroy(this.wrap);
	        justgin.bap.CheckboxEx.superclass.onDestroy.call(this);
	    },
	
		onCheck : function(me, checked){
	        this.hiddenField.value = checked?me.trueValue:me.falseValue;
	    }

});

 

• 扩展两个属性trueValue和falseValue，可提供使用者指定选中或取消时提交的值，默认为true和false。
• 重写字段的onRender方法，在render时，移除用来展示的html的input元素的名称，插入一个的同名hidden元素，保存要提交的值，不改变使用方式的前提下，能保证from在提交时，将插入的新元素提交，确保了设置的值会提交到后台。
• 重写setValue和getValue方法，保证了存取值时数据的同步。
• 常用的Ext创建对象的方式有两种：new justgin.bap.CheckboxEx()和Ext.create({xtype: 'checkbox'})，要想使用户在使用第二种方式时创建一个自己扩展的对象，可以在类的声明后加入一句对象类型的注册语句即可  

Ext.reg('checkbox', justgin.bap.CheckboxEx);