<%@ 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组件的旅程。 - **按钮**：介绍Extjs中按钮组件的各种特性和样式。 - **日期选择器Ext.DatePicker**：学习如何使用日期选择器组件。 #### 第十章：数据与ComboBox - **数据概念**...
- **开始组件学习之旅** - 从最基本的组件开始，逐步深入学习Extjs的各种组件。 - 按钮是最常用的组件之一，用于触发事件或提交表单。 - **被设计得面目全非的按钮** - 指的是按钮组件提供了丰富的定制选项，...
第2章 开始ExtJS之旅 2.1 认识ExtJS的开发包 2.2 也从Helloworld开始 2.3 ExtJS中的基本概念 2.4 非常有用的开发工具 2.4.1 开发插件spket 2.4.2 FullSource 2.4.3 MicrosoftScriptDebugger 2.5 ExtJS对原有...
ExtJS是一种基于JavaScript的开源富客户端...通过学习，你可以掌握构建功能丰富的Web应用所需的技术，开启你的ExtJS开发之旅。在学习过程中，不断实践和探索，相信你很快就能从初学者成长为熟练的开发者。祝你好运！
#### 一、开始组件学习之旅 标志着从基本组件的学习开始，逐步构建更复杂的用户界面。 #### 二、被设计得面目全非的按钮 介绍了ExtJS中按钮组件的高级定制功能，包括图标、文本、工具提示等。 #### 三、日期选择器...