Ext自定义Vtype示例

Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "resources/images/default/s.gif"; Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; //自定义VTypes类型，验证日期范围 Ext.apply(Ext.form.VTypes, { dateRange: function(val, field){ if(field.dateRange){ var beginId = field.dateRange.begin; this.beginField = Ext.getCmp(beginId); var endId = field.dateRange.end; this.endField = Ext.getCmp(endId); var beginDate = this.beginField.getValue(); var endDate = this.endField.getValue(); } if(beginDate <= endDate){ return true; }else{ return false; } }, //验证失败信息 dateRangeText: '开始日期不能大于结束日期' }); var dateForm = new Ext.FormPanel({ title: '自定义验证', labelSeparator: ':', labelWidth: 80, bodyStyle: 'padding: 5 5 5 5', frame: true, height: 130, width: 300, renderTo: Ext.getBody(), items: [{ xtype: 'datefield', id: 'beginDate', format: 'Y年m月d日', width: 150, allowBlank: false, readOnly: true, value: new Date(), fieldLabel: '开始日期', //用于Vtype类型dateRange dateRange: {begin: 'beginDate', end: 'endDate' }, vtype: 'dateRange' },{ xtype: 'datefield', id: 'endDate', format: 'Y年m月d日', width: 150, allowBlank: false, readOnly: true, value: new Date(), fieldLabel: '结束日期', //用于Vtype类型dateRange dateRange: {begin: 'beginDate', end: 'endDate' }, vtype: 'dateRange' }], buttons: [{ text:'提交', handler: function(){ //先检查表单的基本验证是否完成 if (dateForm.form.isValid()){ Ext.Msg.alert('提示','验证通过提交表单'); } } }] }) })