X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..refs/heads/master:/docs/source/Time.html?ds=inline diff --git a/docs/source/Time.html b/docs/source/Time.html index 3805e0e3..94332bfe 100644 --- a/docs/source/Time.html +++ b/docs/source/Time.html @@ -1,44 +1,57 @@ -
+ +/** - * @class Ext.form.field.Time - * @extends Ext.form.field.Picker - * <p>Provides a time input field with a time dropdown and automatic time validation.</p> - * <p>This field recognizes and uses JavaScript Date objects as its main {@link #value} type (only the time - * portion of the date is used; the month/day/year are ignored). In addition, it recognizes string values which - * are parsed according to the {@link #format} and/or {@link #altFormats} configs. These may be reconfigured - * to use time formats appropriate for the user's locale.</p> - * <p>The field may be limited to a certain range of times by using the {@link #minValue} and {@link #maxValue} - * configs, and the interval between time options in the dropdown can be changed with the {@link #increment} config.</p> - * {@img Ext.form.Time/Ext.form.Time.png Ext.form.Time component} - * <p>Example usage:</p> - * <pre><code> -Ext.create('Ext.form.Panel', { - title: 'Time Card', - width: 300, - bodyPadding: 10, - renderTo: Ext.getBody(), - items: [{ - xtype: 'timefield', - name: 'in', - fieldLabel: 'Time In', - minValue: '6:00 AM', - maxValue: '8:00 PM', - increment: 30, - anchor: '100%' - }, { - xtype: 'timefield', - name: 'out', - fieldLabel: 'Time Out', - minValue: '6:00 AM', - maxValue: '8:00 PM', - increment: 30, - anchor: '100%' - }] -}); -</code></pre> - * @constructor - * Create a new Time field - * @param {Object} config - * @xtype timefield + + + + +\ No newline at end of file +The source code + + + + + + +/** + * Provides a time input field with a time dropdown and automatic time validation. + * + * This field recognizes and uses JavaScript Date objects as its main {@link #value} type (only the time portion of the + * date is used; the month/day/year are ignored). In addition, it recognizes string values which are parsed according to + * the {@link #format} and/or {@link #altFormats} configs. These may be reconfigured to use time formats appropriate for + * the user's locale. + * + * The field may be limited to a certain range of times by using the {@link #minValue} and {@link #maxValue} configs, + * and the interval between time options in the dropdown can be changed with the {@link #increment} config. + * + * Example usage: + * + * @example + * Ext.create('Ext.form.Panel', { + * title: 'Time Card', + * width: 300, + * bodyPadding: 10, + * renderTo: Ext.getBody(), + * items: [{ + * xtype: 'timefield', + * name: 'in', + * fieldLabel: 'Time In', + * minValue: '6:00 AM', + * maxValue: '8:00 PM', + * increment: 30, + * anchor: '100%' + * }, { + * xtype: 'timefield', + * name: 'out', + * fieldLabel: 'Time Out', + * minValue: '6:00 AM', + * maxValue: '8:00 PM', + * increment: 30, + * anchor: '100%' + * }] + * }); */ Ext.define('Ext.form.field.Time', { extend:'Ext.form.field.Picker', @@ -46,86 +59,84 @@ Ext.define('Ext.form.field.Time', { requires: ['Ext.form.field.Date', 'Ext.picker.Time', 'Ext.view.BoundListKeyNav', 'Ext.Date'], alternateClassName: ['Ext.form.TimeField', 'Ext.form.Time'], - /** + /** * @cfg {String} triggerCls - * An additional CSS class used to style the trigger button. The trigger will always get the - * {@link #triggerBaseCls} by default and <tt>triggerCls</tt> will be <b>appended</b> if specified. - * Defaults to <tt>'x-form-time-trigger'</tt> for the Time field trigger. + * An additional CSS class used to style the trigger button. The trigger will always get the {@link #triggerBaseCls} + * by default and triggerCls will be **appended** if specified. Defaults to 'x-form-time-trigger' for the Time field + * trigger. */ triggerCls: Ext.baseCSSPrefix + 'form-time-trigger', - /** + /** * @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). + * 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}. */ - /** + /** * @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). + * 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}. */ - /** + /** * @cfg {String} minText - * The error text to display when the entered time is before {@link #minValue} (defaults to - * 'The time in this field must be equal to or after {0}'). + * The error text to display when the entered time is before {@link #minValue}. */ minText : "The time in this field must be equal to or after {0}", - /** + /** * @cfg {String} maxText - * The error text to display when the entered time is after {@link #maxValue} (defaults to - * 'The time in this field must be equal to or before {0}'). + * The error text to display when the entered time is after {@link #maxValue}. */ maxText : "The time in this field must be equal to or before {0}", - /** + /** * @cfg {String} invalidText - * The error text to display when the time in the field is invalid (defaults to - * '{value} is not a valid time'). + * The error text to display when the time in the field is invalid. */ invalidText : "{0} is not a valid time", - /** + /** * @cfg {String} format - * The default time format string which can be overriden for localization support. The format must be - * valid according to {@link Ext.Date#parse} (defaults to 'g:i A', e.g., '3:15 PM'). For 24-hour time - * format try 'H:i' instead. + * The default time format string which can be overriden for localization support. The format must be valid + * according to {@link Ext.Date#parse} (defaults to 'g:i A', e.g., '3:15 PM'). For 24-hour time format try 'H:i' + * instead. */ format : "g:i A", - /** - * @cfg {String} submitFormat The date format string which will be submitted to the server. - * The format must be valid according to {@link Ext.Date#parse} (defaults to <tt>{@link #format}</tt>). + /** + * @cfg {String} submitFormat + * The date format string which will be submitted to the server. The format must be valid according to {@link + * Ext.Date#parse} (defaults to {@link #format}). */ - /** + /** * @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'). + * format. */ 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", - /** + /** * @cfg {Number} increment - * The number of minutes between each time value in the list (defaults to 15). + * The number of minutes between each time value in the list. */ increment: 15, - /** + /** * @cfg {Number} pickerMaxHeight - * The maximum height of the {@link Ext.picker.Time} dropdown. Defaults to 300. + * The maximum height of the {@link Ext.picker.Time} dropdown. */ pickerMaxHeight: 300, - /** + /** * @cfg {Boolean} selectOnTab - * Whether the Tab key should select the currently highlighted item. Defaults to <tt>true</tt>. + * Whether the Tab key should select the currently highlighted item. */ selectOnTab: true, - /** + /** * @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 @@ -160,7 +171,7 @@ Ext.define('Ext.form.field.Time', { me.callParent(); }, - /** + /** * Replaces any existing {@link #minValue} with the new time and refreshes the picker's range. * @param {Date/String} value The minimum time that can be selected */ @@ -173,7 +184,7 @@ Ext.define('Ext.form.field.Time', { } }, - /** + /** * Replaces any existing {@link #maxValue} with the new time and refreshes the picker's range. * @param {Date/String} value The maximum time that can be selected */ @@ -186,7 +197,7 @@ Ext.define('Ext.form.field.Time', { } }, - /** + /** * @private * Updates either the min or max value. Converts the user's value into a Date object whose * year/month/day is set to the {@link #initDate} so that only the time fields are significant. @@ -215,13 +226,13 @@ Ext.define('Ext.form.field.Time', { return this.formatDate(this.parseDate(value)); }, - /** - * Runs all of Time's validations and returns an array of any errors. Note that this first - * runs Text's validations, so the returned array is an amalgamation of all field errors. - * The additional validation checks are testing that the time format is valid, that the chosen - * time is within the {@link #minValue} and {@link #maxValue} constraints set. - * @param {Mixed} value The value to get errors for (defaults to the current field value) - * @return {Array} All validation errors for this field + /** + * Runs all of Time's validations and returns an array of any errors. Note that this first runs Text's validations, + * so the returned array is an amalgamation of all field errors. The additional validation checks are testing that + * the time format is valid, that the chosen time is within the {@link #minValue} and {@link #maxValue} constraints + * set. + * @param {Object} [value] The value to get errors for (defaults to the current field value) + * @return {String[]} All validation errors for this field */ getErrors: function(value) { var me = this, @@ -258,7 +269,7 @@ Ext.define('Ext.form.field.Time', { return Ext.form.field.Date.prototype.formatDate.apply(this, arguments); }, - /** + /** * @private * Parses an input value into a valid Date object. * @param {String/Date} value @@ -313,13 +324,14 @@ Ext.define('Ext.form.field.Time', { return value ? Ext.Date.format(value, format) : null; }, - /** + /** * @private * Creates the {@link Ext.picker.Time} */ createPicker: function() { var me = this, picker = Ext.create('Ext.picker.Time', { + pickerField: me, selModel: { mode: 'SINGLE' }, @@ -343,7 +355,7 @@ Ext.define('Ext.form.field.Time', { return picker; }, - /** + /** * @private * Enables the key nav for the Time picker when it is expanded. * TODO this is largely the same logic as ComboBox, should factor out. @@ -362,7 +374,11 @@ Ext.define('Ext.form.field.Time', { forceKeyDown: true, tab: function(e) { if (selectOnTab) { - this.selectHighlighted(e); + if(me.picker.highlightedItem) { + this.selectHighlighted(e); + } else { + me.collapse(); + } me.triggerBlur(); } // Tab key event is allowed to propagate to field @@ -386,7 +402,7 @@ Ext.define('Ext.form.field.Time', { } }, - /** + /** * @private * Disables the key nav for the Time picker when it is collapsed. */ @@ -399,7 +415,22 @@ Ext.define('Ext.form.field.Time', { } }, - /** + /** + * @private + * Clears the highlighted item in the picker on change. + * This prevents the highlighted item from being selected instead of the custom typed in value when the tab key is pressed. + */ + onChange: function() { + var me = this, + picker = me.picker; + + me.callParent(arguments); + if(picker) { + picker.clearHighlight(); + } + }, + + /** * @private * Handles a time being selected from the Time picker. */ @@ -415,4 +446,6 @@ Ext.define('Ext.form.field.Time', { } }); -