插件"/>
Ext3.0很实用的2个小插件
Ext新加入了2个很实用的小插件:1、用来判断时间输入(结束时间不能大于开始时间)。
2、密码验证。
扩展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;
}
/*
* Always return true since we're only using this vtype to set the
* min/max allowed values (these are tested for after the vtype test)
*/
return true;
},
password : function(val, field) {
if(field.initialPassField) {
var pwd = Ext.getCmp (field.initialPassField);
return (val == pwd.getValue ());
}
return true;
},
passwordText : 'Passwords do not match'
});
使用code:
var dr = new Ext.FormPanel({
labelWidth: 125,
frame: true,
title: 'Date Range',
bodyStyle: 'padding:5px 5px 0',
width: 350,
defaults: {
width: 175
},
defaultType: 'datefield',
items: [{
fieldLabel: 'Start Date',
id: 'startdt',
format: 'Y-m-d',
vtype: 'daterange',
endDateField: 'enddt' // id of the end date field
}, {
fieldLabel: 'End Date',
id: 'enddt',
format: 'Y-m-d',
vtype: 'daterange',
startDateField: 'startdt' // id of the start date field
}]
});
dr.render('dr');
var pwd = new Ext.FormPanel({
labelWidth: 125,
frame: true,
title: 'Password Verification',
bodyStyle: 'padding:5px 5px 0',
width: 350,
defaults: {
width: 175,
inputType: 'password'
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Password',
id: 'pass'
}, {
fieldLabel: 'Confirm Password',
vtype: 'password',
initialPassField: 'pass' // id of the initial password field
}]
});
pwd.render('pw');
更多推荐
Ext3.0很实用的2个小插件
发布评论