examples/form/adv-vtypes.js

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