Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / adv-vtypes.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">// Add the additional 'advanced' VTypes\r
9 Ext.apply(Ext.form.VTypes, {\r
10     daterange : function(val, field) {\r
11         var date = field.parseDate(val);\r
12 \r
13         if(!date){\r
14             return;\r
15         }\r
16         if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {\r
17             var start = Ext.getCmp(field.startDateField);\r
18             start.setMaxValue(date);\r
19             start.validate();\r
20             this.dateRangeMax = date;\r
21         } \r
22         else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {\r
23             var end = Ext.getCmp(field.endDateField);\r
24             end.setMinValue(date);\r
25             end.validate();\r
26             this.dateRangeMin = date;\r
27         }\r
28         /*\r
29          * Always return true since we're only using this vtype to set the\r
30          * min/max allowed values (these are tested for after the vtype test)\r
31          */\r
32         return true;\r
33     },\r
34 \r
35     password : function(val, field) {\r
36         if (field.initialPassField) {\r
37             var pwd = Ext.getCmp(field.initialPassField);\r
38             return (val == pwd.getValue());\r
39         }\r
40         return true;\r
41     },\r
42 \r
43     passwordText : 'Passwords do not match'\r
44 });\r
45 \r
46 \r
47 Ext.onReady(function(){\r
48 \r
49     Ext.QuickTips.init();\r
50 \r
51     // turn on validation errors beside the field globally\r
52     Ext.form.Field.prototype.msgTarget = 'side';\r
53 \r
54     var bd = Ext.getBody();\r
55 \r
56                 /*\r
57                  * ================  Date Range  =======================\r
58                  */\r
59     \r
60     var dr = new Ext.FormPanel({\r
61       labelWidth: 125,\r
62       frame: true,\r
63       title: 'Date Range',\r
64           bodyStyle:'padding:5px 5px 0',\r
65           width: 350,\r
66       defaults: {width: 175},\r
67       defaultType: 'datefield',\r
68       items: [{\r
69         fieldLabel: 'Start Date',\r
70         name: 'startdt',\r
71         id: 'startdt',\r
72         vtype: 'daterange',\r
73         endDateField: 'enddt' // id of the end date field\r
74       },{\r
75         fieldLabel: 'End Date',\r
76         name: 'enddt',\r
77         id: 'enddt',\r
78         vtype: 'daterange',\r
79         startDateField: 'startdt' // id of the start date field\r
80       }]\r
81     });\r
82 \r
83     dr.render('dr');\r
84     \r
85     /*\r
86      * ================  Password Verification =======================\r
87      */\r
88         \r
89     var pwd = new Ext.FormPanel({\r
90       labelWidth: 125,\r
91       frame: true,\r
92       title: 'Password Verification',\r
93       bodyStyle:'padding:5px 5px 0',\r
94       width: 350,\r
95       defaults: {\r
96         width: 175,\r
97         inputType: 'password'\r
98       },\r
99       defaultType: 'textfield',\r
100       items: [{\r
101         fieldLabel: 'Password',\r
102         name: 'pass',\r
103         id: 'pass'\r
104       },{\r
105         fieldLabel: 'Confirm Password',\r
106         name: 'pass-cfrm',\r
107         vtype: 'password',\r
108         initialPassField: 'pass' // id of the initial password field\r
109       }]\r
110     });\r
111 \r
112     pwd.render('pw');\r
113 });</pre>    \r
114 </body>\r
115 </html>