|
|
 <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>
效果圖:
|