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>