Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / form / adv-vtypes.js

diff --git a/examples/form/adv-vtypes.js b/examples/form/adv-vtypes.js
index 02f22c0..aea5636 100644 (file)
--- a/examples/form/adv-vtypes.js
+++ b/examples/form/adv-vtypes.js
@@ -1,114 +1,120 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-// Add the additional 'advanced' VTypes
-Ext.apply(Ext.form.VTypes, {
-    daterange : function(val, field) {
-        var date = field.parseDate(val);
+Ext.require([
+    'Ext.form.*'
+]);
 
-        if(!date){
-            return false;
-        }
-        if (field.startDateField) {
-            var start = Ext.getCmp(field.startDateField);
-            if (!start.maxValue || (date.getTime() != start.maxValue.getTime())) {
+Ext.onReady(function() {
+
+    // Add the additional 'advanced' VTypes
+    Ext.apply(Ext.form.field.VTypes, {
+        daterange: function(val, field) {
+            var date = field.parseDate(val);
+
+            if (!date) {
+                return false;
+            }
+            if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
+                var start = field.up('form').down('#' + field.startDateField);
                 start.setMaxValue(date);
                 start.validate();
+                this.dateRangeMax = date;
             }
-        }
-        else if (field.endDateField) {
-            var end = Ext.getCmp(field.endDateField);
-            if (!end.minValue || (date.getTime() != end.minValue.getTime())) {
+            else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
+                var end = field.up('form').down('#' + field.endDateField);
                 end.setMinValue(date);
                 end.validate();
+                this.dateRangeMin = date;
             }
-        }
-        /*
-         * Always return true since we're only using this vtype to set the
-         * min/max allowed values (these are tested for after the vtype test)
-         */
-        return true;
-    },
-
-    password : function(val, field) {
-        if (field.initialPassField) {
-            var pwd = Ext.getCmp(field.initialPassField);
-            return (val == pwd.getValue());
-        }
-        return true;
-    },
-
-    passwordText : 'Passwords do not match'
-});
+            /*
+             * Always return true since we're only using this vtype to set the
+             * min/max allowed values (these are tested for after the vtype test)
+             */
+            return true;
+        },
 
+        daterangeText: 'Start date must be less than end date',
 
-Ext.onReady(function(){
-
-    Ext.QuickTips.init();
-
-    // turn on validation errors beside the field globally
-    Ext.form.Field.prototype.msgTarget = 'side';
+        password: function(val, field) {
+            if (field.initialPassField) {
+                var pwd = field.up('form').down('#' + field.initialPassField);
+                return (val == pwd.getValue());
+            }
+            return true;
+        },
 
-    var bd = Ext.getBody();
+        passwordText: 'Passwords do not match'
+    });
 
     /*
      * ================  Date Range  =======================
      */
 
-    var dr = new Ext.FormPanel({
-      labelWidth: 125,
-      frame: true,
-      title: 'Date Range',
-      bodyStyle:'padding:5px 5px 0',
-      width: 350,
-      defaults: {width: 175},
-      defaultType: 'datefield',
-      items: [{
-        fieldLabel: 'Start Date',
-        name: 'startdt',
-        id: 'startdt',
-        vtype: 'daterange',
-        endDateField: 'enddt' // id of the end date field
-      },{
-        fieldLabel: 'End Date',
-        name: 'enddt',
-        id: 'enddt',
-        vtype: 'daterange',
-        startDateField: 'startdt' // id of the start date field
-      }]
+    var dr = Ext.create('Ext.FormPanel', {
+        renderTo: 'dr',
+        frame: true,
+        title: 'Date Range',
+        bodyPadding: '5px 5px 0',
+        width: 350,
+        fieldDefaults: {
+            labelWidth: 125,
+            msgTarget: 'side',
+            autoFitErrors: false
+        },
+        defaults: {
+            width: 300
+        },
+        defaultType: 'datefield',
+        items: [
+            {
+                fieldLabel: 'Start Date',
+                name: 'startdt',
+                id: 'startdt',
+                vtype: 'daterange',
+                endDateField: 'enddt' // id of the end date field
+            },
+            {
+                fieldLabel: 'End Date',
+                name: 'enddt',
+                id: 'enddt',
+                vtype: 'daterange',
+                startDateField: 'startdt' // id of the start date field
+            }
+        ]
     });
 
-    dr.render('dr');
 
     /*
      * ================  Password Verification =======================
      */
 
-    var pwd = new Ext.FormPanel({
-      labelWidth: 125,
-      frame: true,
-      title: 'Password Verification',
-      bodyStyle:'padding:5px 5px 0',
-      width: 350,
-      defaults: {
-        width: 175,
-        inputType: 'password'
-      },
-      defaultType: 'textfield',
-      items: [{
-        fieldLabel: 'Password',
-        name: 'pass',
-        id: 'pass'
-      },{
-        fieldLabel: 'Confirm Password',
-        name: 'pass-cfrm',
-        vtype: 'password',
-        initialPassField: 'pass' // id of the initial password field
-      }]
+    var pwd = Ext.create('Ext.FormPanel', {
+        renderTo: 'pw',
+        frame: true,
+        title: 'Password Verification',
+        bodyPadding: '5px 5px 0',
+        width: 350,
+        fieldDefaults: {
+            labelWidth: 125,
+            msgTarget: 'side',
+            autoFitErrors: false
+        },
+        defaults: {
+            width: 300,
+            inputType: 'password'
+        },
+        defaultType: 'textfield',
+        items: [
+            {
+                fieldLabel: 'Password',
+                name: 'pass',
+                id: 'pass'
+            },
+            {
+                fieldLabel: 'Confirm Password',
+                name: 'pass-cfrm',
+                vtype: 'password',
+                initialPassField: 'pass' // id of the initial password field
+            }
+        ]
     });
 
-    pwd.render('pw');
 });