extjs Vtyps

1. Ext.onReady(function(){  
2.     Ext.BLANK_IMAGE_URL = "resources/images/default/s.gif";  
3.     Ext.QuickTips.init();  
4.     Ext.form.Field.prototype.msgTarget = 'side';  
5.       
6.     //自定义VTypes类型，验证日期范围  
7.     Ext.apply(Ext.form.VTypes, {  
8.         dateRange: function(val, field){  
9.             if(field.dateRange){  
10.                 var beginId = field.dateRange.begin;  
11.                 this.beginField = Ext.getCmp(beginId);  
12.                 var endId = field.dateRange.end;  
13.                 this.endField = Ext.getCmp(endId);  
14.                 var beginDate = this.beginField.getValue();  
15.                 var endDate = this.endField.getValue();  
16.             }  
17.             if(beginDate <= endDate){  
18.                 return true;  
19.             }else{  
20.                 return false;  
21.             }  
22.         },  
23.         //验证失败信息  
24.         dateRangeText: '开始日期不能大于结束日期'  
25.     });  
26.       
27.     var dateForm = new Ext.FormPanel({  
28.         title: '自定义验证',  
29.         labelSeparator: ':',  
30.         labelWidth: 80,  
31.         bodyStyle: 'padding: 5 5 5 5',  
32.         frame: true,  
33.         height: 130,  
34.         width: 300,  
35.         renderTo: Ext.getBody(),  
36.         items: [{  
37.             xtype: 'datefield',  
38.             id: 'beginDate',  
39.             format: 'Y年m月d日',  
40.             width: 150,  
41.             allowBlank: false,  
42.             readOnly: true,  
43.             value: new Date(),  
44.             fieldLabel: '开始日期',  
45.             //用于Vtype类型dateRange  
46.             dateRange: {begin: 'beginDate', end: 'endDate' },  
47.             vtype: 'dateRange'  
48.         },{  
49.             xtype: 'datefield',  
50.             id: 'endDate',  
51.             format: 'Y年m月d日',  
52.             width: 150,  
53.             allowBlank: false,  
54.             readOnly: true,  
55.             value: new Date(),  
56.             fieldLabel: '结束日期',  
57.             //用于Vtype类型dateRange  
58.             dateRange: {begin: 'beginDate', end: 'endDate' },  
59.             vtype: 'dateRange'  
60.         }],  
61.         buttons: [{  
62.             text:'提交',  
63.             handler: function(){  
64.                 //先检查表单的基本验证是否完成  
65.                 if (dateForm.form.isValid()){  
66.                     Ext.Msg.alert('提示','验证通过提交表单');  
67.                 }  
68.             }  
69.         }]  
70.     })  
71. }