examples/form/adv-vtypes.js

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