extjs Vtyps

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('提示','验证通过提交表单');

}

}

}]

})

}