<%@ 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之旅”中的一个关键组件——Combox（组合框），特别是其远程加载数据的特性。 Combox在ExtJS中是一个非常灵活的控件，它可以看作是下拉列表和文本输入框的结合体，用户可以输入文本搜索，...
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
6.2.0可能扩展了数据绑定的兼容性，支持更多类型的数据源，或者优化了绑定性能。 3. **UI组件**：ExtJS 提供了众多预定义的UI组件，如按钮、表格、面板、菜单等。6.2.0版本可能添加了新的组件，或者对现有组件进行...
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
"extjs-theme-bootstrap" 是针对 EXTJS4 的一个主题，它借鉴了 Bootstrap 的设计风格，让 EXTJS4 应用程序具有更加现代化和一致的外观。 Bootstrap 是一个流行的前端开发框架，由 Twitter 推出，主要用于构建响应式...
语言程序设计资料：ExtJs学习笔记-2积分.doc
ExtJS快速入门--传智播客--蔡世友
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包（分为32位和64位）和教程，一共四部分
5. **表单元素**：深入探讨表单（Form）的创建，包括各种表单字段（TextField、ComboBox、DateField等）的使用及验证规则。 6. **Ajax交互**：讲解如何利用Ext.Ajax进行异步数据请求，实现服务器端数据的增删查改。 ...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
"extjs-theme-bootstrap-master.zip" 文件很可能是ExtJS的一个主题包，它集成了Bootstrap的样式，使得ExtJS组件能够呈现出Bootstrap的经典外观。 在深入讲解这个主题之前，让我们先了解一下基础概念： 1. **ExtJS*...
在本例"ExtJS-MVC-用户列表实例"中，我们将深入探讨如何利用ExtJS的Model-View-Controller（MVC）架构来创建一个用户列表应用。 MVC模式是软件工程中常用的设计模式，它将应用程序分为三个主要部分：模型（Model）...
在EXTJS这个强大的JavaScript框架中，事件机制是其核心组件之一，它允许组件之间进行通信和交互。在“Extjs源码之--Ext事件机制/继承关系”中，我们将深入探讨EXTJS如何处理事件以及其类层次结构。EXTJS的事件处理...
licensing@extjs.com http://extjs.com/license Open Source License Ext is licensed under the terms of the Open Source GPL 3.0 license. http://www.gnu.org/licenses/gpl.html There are several FLOSS ...
本资源"ExtJS-4.2.2-gpl.rar"是ExtJS 4.2.2的开源版本，适用于GPL许可协议，包含完整的源码、示例、API文档以及相关的文档资料，对于学习和开发基于ExtJS的应用程序非常有帮助。 1. **ExtJS 4.2.2 版本详解** ...
extjs-7.0.0-docs, EXT 7.0.0 官方离线文档包, 希望可以助力于您
Extjs6.2 生成的admin-dashboard官方模板
extjs-660-docs,EXT官方离线文档包, 希望可以且助力于您
在IT行业中，ExtJS是一个广泛使用的JavaScript库，用于构建富客户端的Web应用程序。它提供了丰富的组件库，包括数据网格（Grid）等，使得开发者能够创建交互性极强的数据展示和管理界面。这篇“ExtJS笔记——Grid...