ExtJs 사용자 정의 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(' ',' ');
				}
			}
		}]
	})
})