examples/form/adv-vtypes.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 // Add the additional 'advanced' VTypes\r
  10 Ext.apply(Ext.form.VTypes, {\r
  11     daterange : function(val, field) {\r
  12         var date = field.parseDate(val);\r
  13 \r
  14         if(!date){\r
  15             return;\r
  16         }\r
  17         if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {\r
  18             var start = Ext.getCmp(field.startDateField);\r
  19             start.setMaxValue(date);\r
  20             start.validate();\r
  21             this.dateRangeMax = date;\r
  22         } \r
  23         else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {\r
  24             var end = Ext.getCmp(field.endDateField);\r
  25             end.setMinValue(date);\r
  26             end.validate();\r
  27             this.dateRangeMin = date;\r
  28         }\r
  29         /*\r
  30          * Always return true since we're only using this vtype to set the\r
  31          * min/max allowed values (these are tested for after the vtype test)\r
  32          */\r
  33         return true;\r
  34     },\r
  35 \r
  36     password : function(val, field) {\r
  37         if (field.initialPassField) {\r
  38             var pwd = Ext.getCmp(field.initialPassField);\r
  39             return (val == pwd.getValue());\r
  40         }\r
  41         return true;\r
  42     },\r
  43 \r
  44     passwordText : 'Passwords do not match'\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 });