Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / examples / form / adv-vtypes.js
index 0c6897e..aea5636 100644 (file)
-/*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-// Add the additional 'advanced' VTypes\r
-Ext.apply(Ext.form.VTypes, {\r
-    daterange : function(val, field) {\r
-        var date = field.parseDate(val);\r
-\r
-        if(!date){\r
-            return;\r
-        }\r
-        if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {\r
-            var start = Ext.getCmp(field.startDateField);\r
-            start.setMaxValue(date);\r
-            start.validate();\r
-            this.dateRangeMax = date;\r
-        } \r
-        else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {\r
-            var end = Ext.getCmp(field.endDateField);\r
-            end.setMinValue(date);\r
-            end.validate();\r
-            this.dateRangeMin = date;\r
-        }\r
-        /*\r
-         * Always return true since we're only using this vtype to set the\r
-         * min/max allowed values (these are tested for after the vtype test)\r
-         */\r
-        return true;\r
-    },\r
-\r
-    password : function(val, field) {\r
-        if (field.initialPassField) {\r
-            var pwd = Ext.getCmp(field.initialPassField);\r
-            return (val == pwd.getValue());\r
-        }\r
-        return true;\r
-    },\r
-\r
-    passwordText : 'Passwords do not match'\r
-});\r
-\r
-\r
-Ext.onReady(function(){\r
-\r
-    Ext.QuickTips.init();\r
-\r
-    // turn on validation errors beside the field globally\r
-    Ext.form.Field.prototype.msgTarget = 'side';\r
-\r
-    var bd = Ext.getBody();\r
-\r
-               /*\r
-                * ================  Date Range  =======================\r
-                */\r
-    \r
-    var dr = new Ext.FormPanel({\r
-      labelWidth: 125,\r
-      frame: true,\r
-      title: 'Date Range',\r
-         bodyStyle:'padding:5px 5px 0',\r
-         width: 350,\r
-      defaults: {width: 175},\r
-      defaultType: 'datefield',\r
-      items: [{\r
-        fieldLabel: 'Start Date',\r
-        name: 'startdt',\r
-        id: 'startdt',\r
-        vtype: 'daterange',\r
-        endDateField: 'enddt' // id of the end date field\r
-      },{\r
-        fieldLabel: 'End Date',\r
-        name: 'enddt',\r
-        id: 'enddt',\r
-        vtype: 'daterange',\r
-        startDateField: 'startdt' // id of the start date field\r
-      }]\r
-    });\r
-\r
-    dr.render('dr');\r
-    \r
-    /*\r
-     * ================  Password Verification =======================\r
-     */\r
-        \r
-    var pwd = new Ext.FormPanel({\r
-      labelWidth: 125,\r
-      frame: true,\r
-      title: 'Password Verification',\r
-      bodyStyle:'padding:5px 5px 0',\r
-      width: 350,\r
-      defaults: {\r
-        width: 175,\r
-        inputType: 'password'\r
-      },\r
-      defaultType: 'textfield',\r
-      items: [{\r
-        fieldLabel: 'Password',\r
-        name: 'pass',\r
-        id: 'pass'\r
-      },{\r
-        fieldLabel: 'Confirm Password',\r
-        name: 'pass-cfrm',\r
-        vtype: 'password',\r
-        initialPassField: 'pass' // id of the initial password field\r
-      }]\r
-    });\r
-\r
-    pwd.render('pw');\r
-});
\ No newline at end of file
+Ext.require([
+    'Ext.form.*'
+]);
+
+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 && (!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;
+        },
+
+        daterangeText: 'Start date must be less than end date',
+
+        password: function(val, field) {
+            if (field.initialPassField) {
+                var pwd = field.up('form').down('#' + field.initialPassField);
+                return (val == pwd.getValue());
+            }
+            return true;
+        },
+
+        passwordText: 'Passwords do not match'
+    });
+
+    /*
+     * ================  Date Range  =======================
+     */
+
+    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
+            }
+        ]
+    });
+
+
+    /*
+     * ================  Password Verification =======================
+     */
+
+    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
+            }
+        ]
+    });
+
+});