Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / docs / source / TimeField.html
index b188580..faa2392 100644 (file)
-<html>\r
-<head>\r
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \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"><div id="cls-Ext.form.TimeField"></div>/**\r
- * @class Ext.form.TimeField\r
- * @extends Ext.form.ComboBox\r
- * Provides a time input field with a time dropdown and automatic time validation.  Example usage:\r
- * <pre><code>\r
-new Ext.form.TimeField({\r
-    minValue: '9:00 AM',\r
-    maxValue: '6:00 PM',\r
-    increment: 30\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Create a new TimeField\r
- * @param {Object} config\r
- * @xtype timefield\r
- */\r
-Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, {\r
-    <div id="cfg-Ext.form.TimeField-minValue"></div>/**\r
-     * @cfg {Date/String} minValue\r
-     * The minimum allowed time. Can be either a Javascript date object with a valid time value or a string \r
-     * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).\r
-     */\r
-    minValue : undefined,\r
-    <div id="cfg-Ext.form.TimeField-maxValue"></div>/**\r
-     * @cfg {Date/String} maxValue\r
-     * The maximum allowed time. Can be either a Javascript date object with a valid time value or a string \r
-     * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).\r
-     */\r
-    maxValue : undefined,\r
-    <div id="cfg-Ext.form.TimeField-minText"></div>/**\r
-     * @cfg {String} minText\r
-     * The error text to display when the date in the cell is before minValue (defaults to\r
-     * 'The time in this field must be equal to or after {0}').\r
-     */\r
-    minText : "The time in this field must be equal to or after {0}",\r
-    <div id="cfg-Ext.form.TimeField-maxText"></div>/**\r
-     * @cfg {String} maxText\r
-     * The error text to display when the time is after maxValue (defaults to\r
-     * 'The time in this field must be equal to or before {0}').\r
-     */\r
-    maxText : "The time in this field must be equal to or before {0}",\r
-    <div id="cfg-Ext.form.TimeField-invalidText"></div>/**\r
-     * @cfg {String} invalidText\r
-     * The error text to display when the time in the field is invalid (defaults to\r
-     * '{value} is not a valid time').\r
-     */\r
-    invalidText : "{0} is not a valid time",\r
-    <div id="cfg-Ext.form.TimeField-format"></div>/**\r
-     * @cfg {String} format\r
-     * The default time format string which can be overriden for localization support.  The format must be\r
-     * valid according to {@link Date#parseDate} (defaults to 'g:i A', e.g., '3:15 PM').  For 24-hour time\r
-     * format try 'H:i' instead.\r
-     */\r
-    format : "g:i A",\r
-    <div id="cfg-Ext.form.TimeField-altFormats"></div>/**\r
-     * @cfg {String} altFormats\r
-     * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined\r
-     * format (defaults to 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H').\r
-     */\r
-    altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H",\r
-    <div id="cfg-Ext.form.TimeField-increment"></div>/**\r
-     * @cfg {Number} increment\r
-     * The number of minutes between each time value in the list (defaults to 15).\r
-     */\r
-    increment: 15,\r
-\r
-    // private override\r
-    mode: 'local',\r
-    // private override\r
-    triggerAction: 'all',\r
-    // private override\r
-    typeAhead: false,\r
-    \r
-    // private - This is the date to use when generating time values in the absence of either minValue\r
-    // or maxValue.  Using the current date causes DST issues on DST boundary dates, so this is an \r
-    // arbitrary "safe" date that can be any date aside from DST boundary dates.\r
-    initDate: '1/1/2008',\r
-\r
-    // private\r
-    initComponent : function(){\r
-        if(Ext.isDefined(this.minValue)){\r
-            this.setMinValue(this.minValue, true);\r
-        }\r
-        if(Ext.isDefined(this.maxValue)){\r
-            this.setMaxValue(this.maxValue, true);\r
-        }\r
-        if(!this.store){\r
-            this.generateStore(true);\r
-        }\r
-        Ext.form.TimeField.superclass.initComponent.call(this);\r
-    },\r
-    \r
-    <div id="method-Ext.form.TimeField-setMinValue"></div>/**\r
-     * Replaces any existing {@link #minValue} with the new time and refreshes the store.\r
-     * @param {Date/String} value The minimum time that can be selected\r
-     */\r
-    setMinValue: function(value, /* private */ initial){\r
-        this.setLimit(value, true, initial);\r
-        return this;\r
-    },\r
-\r
-    <div id="method-Ext.form.TimeField-setMaxValue"></div>/**\r
-     * Replaces any existing {@link #maxValue} with the new time and refreshes the store.\r
-     * @param {Date/String} value The maximum time that can be selected\r
-     */\r
-    setMaxValue: function(value, /* private */ initial){\r
-        this.setLimit(value, false, initial);\r
-        return this;\r
-    },\r
-    \r
-    // private\r
-    generateStore: function(initial){\r
-        var min = this.minValue || new Date(this.initDate).clearTime(),\r
-            max = this.maxValue || new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1),\r
-            times = [];\r
-            \r
-        while(min <= max){\r
-            times.push(min.dateFormat(this.format));\r
-            min = min.add('mi', this.increment);\r
-        }\r
-        this.bindStore(times, initial);\r
-    },\r
-\r
-    // private\r
-    setLimit: function(value, isMin, initial){\r
-        var d;\r
-        if(Ext.isString(value)){\r
-            d = this.parseDate(value);\r
-        }else if(Ext.isDate(value)){\r
-            d = value;\r
-        }\r
-        if(d){\r
-            var val = new Date(this.initDate).clearTime();\r
-            val.setHours(d.getHours(), d.getMinutes(), isMin ? 0 : 59, 0);\r
-            this[isMin ? 'minValue' : 'maxValue'] = val;\r
-            if(!initial){\r
-                this.generateStore();\r
-            }\r
-        }\r
-    },\r
-    \r
-    // inherited docs\r
-    getValue : function(){\r
-        var v = Ext.form.TimeField.superclass.getValue.call(this);\r
-        return this.formatDate(this.parseDate(v)) || '';\r
-    },\r
-\r
-    // inherited docs\r
-    setValue : function(value){\r
-        return Ext.form.TimeField.superclass.setValue.call(this, this.formatDate(this.parseDate(value)));\r
-    },\r
-\r
-    // private overrides\r
-    validateValue : Ext.form.DateField.prototype.validateValue,\r
-    parseDate : Ext.form.DateField.prototype.parseDate,\r
-    formatDate : Ext.form.DateField.prototype.formatDate,\r
-\r
-    // private\r
-    beforeBlur : function(){\r
-        var v = this.parseDate(this.getRawValue());\r
-        if(v){\r
-            this.setValue(v.dateFormat(this.format));\r
-        }\r
-        Ext.form.TimeField.superclass.beforeBlur.call(this);\r
-    }\r
-\r
-    <div id="cfg-Ext.form.TimeField-grow"></div>/**\r
-     * @cfg {Boolean} grow @hide\r
-     */\r
-    <div id="cfg-Ext.form.TimeField-growMin"></div>/**\r
-     * @cfg {Number} growMin @hide\r
-     */\r
-    <div id="cfg-Ext.form.TimeField-growMax"></div>/**\r
-     * @cfg {Number} growMax @hide\r
-     */\r
-    <div id="method-Ext.form.TimeField-autoSize"></div>/**\r
-     * @hide\r
-     * @method autoSize\r
-     */\r
-});\r
-Ext.reg('timefield', Ext.form.TimeField);</pre>    \r
-</body>\r
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <title>The source code</title>
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+<div id="cls-Ext.form.TimeField"></div>/**
+ * @class Ext.form.TimeField
+ * @extends Ext.form.ComboBox
+ * Provides a time input field with a time dropdown and automatic time validation.  Example usage:
+ * <pre><code>
+new Ext.form.TimeField({
+    minValue: '9:00 AM',
+    maxValue: '6:00 PM',
+    increment: 30
+});
+</code></pre>
+ * @constructor
+ * Create a new TimeField
+ * @param {Object} config
+ * @xtype timefield
+ */
+Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, {
+    <div id="cfg-Ext.form.TimeField-minValue"></div>/**
+     * @cfg {Date/String} minValue
+     * The minimum allowed time. Can be either a Javascript date object with a valid time value or a string
+     * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).
+     */
+    minValue : undefined,
+    <div id="cfg-Ext.form.TimeField-maxValue"></div>/**
+     * @cfg {Date/String} maxValue
+     * The maximum allowed time. Can be either a Javascript date object with a valid time value or a string
+     * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).
+     */
+    maxValue : undefined,
+    <div id="cfg-Ext.form.TimeField-minText"></div>/**
+     * @cfg {String} minText
+     * The error text to display when the date in the cell is before minValue (defaults to
+     * 'The time in this field must be equal to or after {0}').
+     */
+    minText : "The time in this field must be equal to or after {0}",
+    <div id="cfg-Ext.form.TimeField-maxText"></div>/**
+     * @cfg {String} maxText
+     * The error text to display when the time is after maxValue (defaults to
+     * 'The time in this field must be equal to or before {0}').
+     */
+    maxText : "The time in this field must be equal to or before {0}",
+    <div id="cfg-Ext.form.TimeField-invalidText"></div>/**
+     * @cfg {String} invalidText
+     * The error text to display when the time in the field is invalid (defaults to
+     * '{value} is not a valid time').
+     */
+    invalidText : "{0} is not a valid time",
+    <div id="cfg-Ext.form.TimeField-format"></div>/**
+     * @cfg {String} format
+     * The default time format string which can be overriden for localization support.  The format must be
+     * valid according to {@link Date#parseDate} (defaults to 'g:i A', e.g., '3:15 PM').  For 24-hour time
+     * format try 'H:i' instead.
+     */
+    format : "g:i A",
+    <div id="cfg-Ext.form.TimeField-altFormats"></div>/**
+     * @cfg {String} altFormats
+     * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
+     * format (defaults to 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A').
+     */
+    altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A",
+    <div id="cfg-Ext.form.TimeField-increment"></div>/**
+     * @cfg {Number} increment
+     * The number of minutes between each time value in the list (defaults to 15).
+     */
+    increment: 15,
+
+    // private override
+    mode: 'local',
+    // private override
+    triggerAction: 'all',
+    // private override
+    typeAhead: false,
+
+    // private - This is the date to use when generating time values in the absence of either minValue
+    // or maxValue.  Using the current date causes DST issues on DST boundary dates, so this is an
+    // arbitrary "safe" date that can be any date aside from DST boundary dates.
+    initDate: '1/1/2008',
+
+    initDateFormat: 'j/n/Y',
+
+    // private
+    initComponent : function(){
+        if(Ext.isDefined(this.minValue)){
+            this.setMinValue(this.minValue, true);
+        }
+        if(Ext.isDefined(this.maxValue)){
+            this.setMaxValue(this.maxValue, true);
+        }
+        if(!this.store){
+            this.generateStore(true);
+        }
+        Ext.form.TimeField.superclass.initComponent.call(this);
+    },
+
+    <div id="method-Ext.form.TimeField-setMinValue"></div>/**
+     * Replaces any existing {@link #minValue} with the new time and refreshes the store.
+     * @param {Date/String} value The minimum time that can be selected
+     */
+    setMinValue: function(value, /* private */ initial){
+        this.setLimit(value, true, initial);
+        return this;
+    },
+
+    <div id="method-Ext.form.TimeField-setMaxValue"></div>/**
+     * Replaces any existing {@link #maxValue} with the new time and refreshes the store.
+     * @param {Date/String} value The maximum time that can be selected
+     */
+    setMaxValue: function(value, /* private */ initial){
+        this.setLimit(value, false, initial);
+        return this;
+    },
+
+    // private
+    generateStore: function(initial){
+        var min = this.minValue || new Date(this.initDate).clearTime(),
+            max = this.maxValue || new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1),
+            times = [];
+
+        while(min <= max){
+            times.push(min.dateFormat(this.format));
+            min = min.add('mi', this.increment);
+        }
+        this.bindStore(times, initial);
+    },
+
+    // private
+    setLimit: function(value, isMin, initial){
+        var d;
+        if(Ext.isString(value)){
+            d = this.parseDate(value);
+        }else if(Ext.isDate(value)){
+            d = value;
+        }
+        if(d){
+            var val = new Date(this.initDate).clearTime();
+            val.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
+            this[isMin ? 'minValue' : 'maxValue'] = val;
+            if(!initial){
+                this.generateStore();
+            }
+        }
+    },
+
+    // inherited docs
+    getValue : function(){
+        var v = Ext.form.TimeField.superclass.getValue.call(this);
+        return this.formatDate(this.parseDate(v)) || '';
+    },
+
+    // inherited docs
+    setValue : function(value){
+        return Ext.form.TimeField.superclass.setValue.call(this, this.formatDate(this.parseDate(value)));
+    },
+
+    // private overrides
+    validateValue : Ext.form.DateField.prototype.validateValue,
+
+    formatDate : Ext.form.DateField.prototype.formatDate,
+
+    parseDate: function(value) {
+        if (!value || Ext.isDate(value)) {
+            return value;
+        }
+
+        var id = this.initDate + ' ',
+            idf = this.initDateFormat + ' ',
+            v = Date.parseDate(id + value, idf + this.format), // *** handle DST. note: this.format is a TIME-only format
+            af = this.altFormats;
+
+        if (!v && af) {
+            if (!this.altFormatsArray) {
+                this.altFormatsArray = af.split("|");
+            }
+            for (var i = 0, afa = this.altFormatsArray, len = afa.length; i < len && !v; i++) {
+                v = Date.parseDate(id + value, idf + afa[i]);
+            }
+        }
+
+        return v;
+    }
+});
+Ext.reg('timefield', Ext.form.TimeField);</pre>    
+</body>
 </html>
\ No newline at end of file