|
|
 <HTML>
<HEAD>
<TITLE> date form validation .etc </TITLE>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext-all-debug.js"></script>
  <script>
 //将新属性daterange,password,添加到form.Vtypes
  Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);
if(!date){
return;
 }
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = Ext.getCmp(field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = Ext.getCmp(field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}
return true;
},
password : function(val, field)
{
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText : '两次密码输入不一致'
});
Ext.onReady(function(){
//开始验证提示
Ext.QuickTips.init();
// 将验证信息显示在旁边
Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
var dr = new Ext.FormPanel(
{
labelWidth: 120, //标签显示宽度
frame: true, //is frame
title: '日期选择范围',
width: 350,
defaults: {width: 175},
defaultType: 'datefield',
renderTo : 'dr',
allowDomMove : true,
items: [{
fieldLabel: '开始日期',
id: 'startdt',
vtype: 'daterange',
endDateField: 'enddt' //结束日期的id(开始日期小于结束日期)
},{
fieldLabel: '结束日期',
id: 'enddt',
vtype: 'daterange',
startDateField: 'startdt' //开始日期的id
}]
});
//构建一个密码Form
var pwd = new Ext.FormPanel({
labelWidth: 125,
frame: true,
title: '密码验证框',
width: 350,
renderTo : 'pw',
allowDomMove : true,
draggable : true,
defaults: {
width: 175,
inputType: 'password'
},
defaultType: 'textfield',
items: [{
fieldLabel: '密码:',
name: 'pass',
id: 'pass'
},{
fieldLabel: '密码确认:',
name: 'pass-cfrm',
vtype: 'password',
initialPassField: 'pass'
}]
});
//构造一个window容器
var window = new Ext.Window({
x : 200,
y : 200,
maximizable : true, //显示最大化按钮
minimizable : true, //显示最小化按钮
//autoWidth : true,
width : 350,
width : 400,
//autoHeight : true,
title : '测试窗口',
renderTo : 'd',
resizable : true,
items : [dr,pwd]
});
window.show();
//构建两个按钮
new Ext.Button({
text : '显示',
renderTo : 'b1',
handler : function()
{
window.show();
}
});
new Ext.Button({
text : '隐藏',
renderTo : 'b2',
handler : function()
{
window.hide();
}
});
 });
</script>
</HEAD>
<BODY>
<div id='b1'></div>
<div id='b2'></div>
<div id='d'></div>
<div id='dr'></div>
<div id='pw' style="padding-top:20px"></div>
</BODY>
</HTML>
效果图:
|