`

Extjs之旅-多字段验证扩展

ExtjsdateRange 
阅读更多 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="shared/example.css" />
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
Ext.onReady(function(){
//自定义电话号码的VType验证
Ext.apply(Ext.form.field.VTypes,{
	dateRange:function(val,field){
		var beginDate=null,//开始日期
		beginDateCmp=null,//开始日期组件
		endDate=null,
		endDateCmp=null,
		validStatus=true;//验证状态
		if(field.dateRange){
			//获取开始时间
			if(!Ext.isEmpty(field.dateRange.begin)){
				beginDateCmp=Ext.getCmp(field.dateRange.begin);
				beginDate=beginDateCmp.getValue();
			}
			//获取结束时间
			if(!Ext.isEmpty(field.dateRange.end)){
				endDateCmp=Ext.getCmp(field.dateRange.end);
				endDate=endDateCmp.getValue();
			}
			//如果开始日期和结束日期有一个为空则校验通过
			if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){
				validStatus=beginDate<=endDate;
			}
			return validStatus;
		}
	},
	dateRangeText:'开始日期不能大于结束日，请重新选择'
});
 Ext.QuickTips.init();
 //创建表单
Ext.create('Ext.form.Panel',{
	 title:'自定义VType实例',
	 renderTo:'form',
	 bodyPadding:5,
	 frame:true,
	 width:300,
	 fielddefaults:{
		 autoFitErrors:false,
		labelSeparator:':',
		labelWidth:90,
		width:210,
		format:'Y年n月j日',
		editable:false,
		allowBlank:false,
		msgTarget:'side'
	 },
	 defaultType:'datefield',
	 items:[{
		 id:'beginDate1',
		 fieldLabel:'入学开始日期',
		 dateRange:{begin:'beginDate1',end:'endDate1'},
		 vtype:'dateRange'
		 },
		 {
			 id:'endDate1',
			 fieldLabel:'入学结束日期',
			 dateRange:{begin:'beginDate1',end:'endDate1'},
			 vtype:'dateRange'
		},{
			 id:'beginDate2',
			 fieldLabel:'毕业开始日期',
			 dateRange:{begin:'beginDate2',end:'endDate2'},
			 vtype:'dateRange'
			 },
			 {
				 id:'endDate2',
				 fieldLabel:'毕业结束日期',
				 dateRange:{begin:'beginDate2',end:'endDate2'},
				 vtype:'dateRange'
			}
	 ]
 });
});
</script>
</head>
<body>
<div id="form"></div>
</body>
</html>

 

分享到：
| Extjs之旅-HtmlEditor编辑器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics