examples/form/adv-vtypes.js

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