ExtJs自定义Vtype示例

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "resources/images/default/s.gif";
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
	
	//自定义VTypes类型，验证日期范围
	Ext.apply(Ext.form.VTypes, {
		dateRange: function(val, field){
			if(field.dateRange){
				var beginId = field.dateRange.begin;
				this.beginField = Ext.getCmp(beginId);
				var endId = field.dateRange.end;
				this.endField = Ext.getCmp(endId);
				var beginDate = this.beginField.getValue();
				var endDate = this.endField.getValue();
			}
			if(beginDate <= endDate){
				return true;
			}else{
				return false;
			}
		},
		//验证失败信息
		dateRangeText: '开始日期不能大于结束日期'
	});
	
	var dateForm = new Ext.FormPanel({
		title: '自定义验证',
		labelSeparator: ':',
		labelWidth: 80,
		bodyStyle: 'padding: 5 5 5 5',
		frame: true,
		height: 130,
		width: 300,
		renderTo: Ext.getBody(),
		items: [{
			xtype: 'datefield',
			id: 'beginDate',
			format: 'Y年m月d日',
			width: 150,
			allowBlank: false,
			readOnly: true,
			value: new Date(),
			fieldLabel: '开始日期',
			//用于Vtype类型dateRange
			dateRange: {begin: 'beginDate', end: 'endDate' },
			vtype: 'dateRange'
		},{
			xtype: 'datefield',
			id: 'endDate',
			format: 'Y年m月d日',
			width: 150,
			allowBlank: false,
			readOnly: true,
			value: new Date(),
			fieldLabel: '结束日期',
			//用于Vtype类型dateRange
			dateRange: {begin: 'beginDate', end: 'endDate' },
			vtype: 'dateRange'
		}],
		buttons: [{
			text:'提交',
			handler: function(){
				//先检查表单的基本验证是否完成
				if (dateForm.form.isValid()){
					Ext.Msg.alert('提示','验证通过提交表单');
				}
			}
		}]
	})
})