-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-form.field.Time-method-constructor'><span id='Ext-form.field.Time'>/**
-</span></span> * @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
+<!DOCTYPE html>
+<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>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-form-field-Time'>/**
+</span> * 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',
requires: ['Ext.form.field.Date', 'Ext.picker.Time', 'Ext.view.BoundListKeyNav', 'Ext.Date'],
alternateClassName: ['Ext.form.TimeField', 'Ext.form.Time'],
-<span id='Ext-form.field.Time-cfg-triggerCls'> /**
+<span id='Ext-form-field-Time-cfg-triggerCls'> /**
</span> * @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',
-<span id='Ext-form.field.Time-cfg-minValue'> /**
+<span id='Ext-form-field-Time-cfg-minValue'> /**
</span> * @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}.
*/
-<span id='Ext-form.field.Time-cfg-maxValue'> /**
+<span id='Ext-form-field-Time-cfg-maxValue'> /**
</span> * @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}.
*/
-<span id='Ext-form.field.Time-cfg-minText'> /**
+<span id='Ext-form-field-Time-cfg-minText'> /**
</span> * @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}",
-<span id='Ext-form.field.Time-cfg-maxText'> /**
+<span id='Ext-form-field-Time-cfg-maxText'> /**
</span> * @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}",
-<span id='Ext-form.field.Time-cfg-invalidText'> /**
+<span id='Ext-form-field-Time-cfg-invalidText'> /**
</span> * @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",
-<span id='Ext-form.field.Time-cfg-format'> /**
+<span id='Ext-form-field-Time-cfg-format'> /**
</span> * @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",
-<span id='Ext-form.field.Time-cfg-submitFormat'> /**
-</span> * @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>).
+<span id='Ext-form-field-Time-cfg-submitFormat'> /**
+</span> * @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}).
*/
-<span id='Ext-form.field.Time-cfg-altFormats'> /**
+<span id='Ext-form-field-Time-cfg-altFormats'> /**
</span> * @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",
-<span id='Ext-form.field.Time-cfg-increment'> /**
+<span id='Ext-form-field-Time-cfg-increment'> /**
</span> * @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,
-<span id='Ext-form.field.Time-cfg-pickerMaxHeight'> /**
+<span id='Ext-form-field-Time-cfg-pickerMaxHeight'> /**
</span> * @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,
-<span id='Ext-form.field.Time-cfg-selectOnTab'> /**
+<span id='Ext-form-field-Time-cfg-selectOnTab'> /**
</span> * @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,
-<span id='Ext-form.field.Time-property-initDate'> /**
+<span id='Ext-form-field-Time-property-initDate'> /**
</span> * @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
me.callParent();
},
-<span id='Ext-form.field.Time-method-setMinValue'> /**
+<span id='Ext-form-field-Time-method-setMinValue'> /**
</span> * 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
*/
}
},
-<span id='Ext-form.field.Time-method-setMaxValue'> /**
+<span id='Ext-form-field-Time-method-setMaxValue'> /**
</span> * 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
*/
}
},
-<span id='Ext-form.field.Time-method-setLimit'> /**
+<span id='Ext-form-field-Time-method-setLimit'> /**
</span> * @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.
return this.formatDate(this.parseDate(value));
},
-<span id='Ext-form.field.Time-method-getErrors'> /**
-</span> * 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
+<span id='Ext-form-field-Time-method-getErrors'> /**
+</span> * 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,
return Ext.form.field.Date.prototype.formatDate.apply(this, arguments);
},
-<span id='Ext-form.field.Time-method-parseDate'> /**
+<span id='Ext-form-field-Time-method-parseDate'> /**
</span> * @private
* Parses an input value into a valid Date object.
* @param {String/Date} value
return value ? Ext.Date.format(value, format) : null;
},
-<span id='Ext-form.field.Time-method-createPicker'> /**
+<span id='Ext-form-field-Time-method-createPicker'> /**
</span> * @private
* Creates the {@link Ext.picker.Time}
*/
createPicker: function() {
var me = this,
picker = Ext.create('Ext.picker.Time', {
+ pickerField: me,
selModel: {
mode: 'SINGLE'
},
return picker;
},
-<span id='Ext-form.field.Time-method-onExpand'> /**
+<span id='Ext-form-field-Time-method-onExpand'> /**
</span> * @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.
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
}
},
-<span id='Ext-form.field.Time-method-onCollapse'> /**
+<span id='Ext-form-field-Time-method-onCollapse'> /**
</span> * @private
* Disables the key nav for the Time picker when it is collapsed.
*/
}
},
-<span id='Ext-form.field.Time-method-onListSelect'> /**
+<span id='Ext-form-field-Time-method-onChange'> /**
+</span> * @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();
+ }
+ },
+
+<span id='Ext-form-field-Time-method-onListSelect'> /**
</span> * @private
* Handles a time being selected from the Time picker.
*/
}
});
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff