examples/form/adv-vtypes.js

   1 Ext.require([
   2     'Ext.form.*'
   3 ]);
   4
   5 Ext.onReady(function() {
   6
   7     // Add the additional 'advanced' VTypes
   8     Ext.apply(Ext.form.field.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 = field.up('form').down('#' + 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 = field.up('form').down('#' + 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         daterangeText: 'Start date must be less than end date',
  35
  36         password: function(val, field) {
  37             if (field.initialPassField) {
  38                 var pwd = field.up('form').down('#' + field.initialPassField);
  39                 return (val == pwd.getValue());
  40             }
  41             return true;
  42         },
  43
  44         passwordText: 'Passwords do not match'
  45     });
  46
  47     /*
  48      * ================  Date Range  =======================
  49      */
  50
  51     var dr = Ext.create('Ext.FormPanel', {
  52         renderTo: 'dr',
  53         frame: true,
  54         title: 'Date Range',
  55         bodyPadding: '5px 5px 0',
  56         width: 350,
  57         fieldDefaults: {
  58             labelWidth: 125,
  59             msgTarget: 'side',
  60             autoFitErrors: false
  61         },
  62         defaults: {
  63             width: 300
  64         },
  65         defaultType: 'datefield',
  66         items: [
  67             {
  68                 fieldLabel: 'Start Date',
  69                 name: 'startdt',
  70                 id: 'startdt',
  71                 vtype: 'daterange',
  72                 endDateField: 'enddt' // id of the end date field
  73             },
  74             {
  75                 fieldLabel: 'End Date',
  76                 name: 'enddt',
  77                 id: 'enddt',
  78                 vtype: 'daterange',
  79                 startDateField: 'startdt' // id of the start date field
  80             }
  81         ]
  82     });
  83
  84
  85     /*
  86      * ================  Password Verification =======================
  87      */
  88
  89     var pwd = Ext.create('Ext.FormPanel', {
  90         renderTo: 'pw',
  91         frame: true,
  92         title: 'Password Verification',
  93         bodyPadding: '5px 5px 0',
  94         width: 350,
  95         fieldDefaults: {
  96             labelWidth: 125,
  97             msgTarget: 'side',
  98             autoFitErrors: false
  99         },
 100         defaults: {
 101             width: 300,
 102             inputType: 'password'
 103         },
 104         defaultType: 'textfield',
 105         items: [
 106             {
 107                 fieldLabel: 'Password',
 108                 name: 'pass',
 109                 id: 'pass'
 110             },
 111             {
 112                 fieldLabel: 'Confirm Password',
 113                 name: 'pass-cfrm',
 114                 vtype: 'password',
 115                 initialPassField: 'pass' // id of the initial password field
 116             }
 117         ]
 118     });
 119
 120 });