Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / adv-vtypes.html
diff --git a/docs/source/adv-vtypes.html b/docs/source/adv-vtypes.html
new file mode 100644 (file)
index 0000000..8dd8ec0
--- /dev/null
@@ -0,0 +1,115 @@
+<html>\r
+<head>\r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js">// 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
+});</pre>    \r
+</body>\r
+</html>
\ No newline at end of file