/** * This component presents a time selection view with different interaction modes * depending on the device and configuration options. Default time view is analog * clock face. * * Time panel is mostly used as a picker by {@link Ext.field.Time} but can also be * created and used directly. * * @since 6.6.0 * * Example usage: * * @example * Ext.create('Ext.form.Panel', { * fullscreen: true, * items: [ * { * xtype: 'timepanel', * shadow: true * } * ] * }); */Ext.define('Ext.panel.Time', { extend: 'Ext.Panel', xtype: 'timepanel', mixins: [ 'Ext.mixin.ConfigProxy' ], config: { view: { xtype: 'analogtime' } }, proxyConfig: { view: { configs: [ /** * @cfg {Date} [value] * Time value for the panel. If not set, current time will be displayed. */ 'value', /** * @cfg {Boolean} [autoAdvance=true] * If `true`, time panel will automatically advance to minutes after * selecting an hour value. Setting this to `false` will disable this * behavior, and switching from hours to minutes will have to be done * manually via Time panel header. */ 'autoAdvance', /** * @cfg {Boolean} [vertical=true] * When `true`, Time header will be at the top of the Time panel. * When `false`, Time header will be at the left side of the Time panel. * When `auto`, Time header will be set based on the orientation of the device. */ 'vertical', /** * @cfg {Boolean} [confirmable=false] * When set to `true`, Time panel will have OK and Cancel buttons in * a toolbar docked to the bottom of the Panel, and user will need to * confirm selection by activating OK button. * When set to `false`, Time panel will not have OK and Cancel buttons * and selection will be confirmed automatically when minutes are * selected. */ 'confirmable', /** * @cfg {Function} [handler] * This function, if provided, will be called when Time selection * is confirmed by activating OK button (if {@link #confirmable} is `true`), * or selecting minutes. */ 'confirmHandler', /** * @cfg {Function} [declineHandler] * This function, if provided, will be called when user has activated * Cancel button (only if {@link #confirmable} is `true`). */ 'declineHandler', /** * @cfg {Object} [scope='this'] * The scope in which {@link #handler} function will be called. */ 'scope', /** * @cfg {String} buttonAlign * @inheritdoc */ /** * @cfg {Object} defaultButtons * Configuration of the buttons to add to the Time panel if * {@link #confirmable} is set to `true`. * * Default is to provide OK and Cancel buttons. */ 'defaultButtons', /** * @cfg {String} [mode=hour] * @private * Default mode for Time Panel. values can be 'hour' or 'minute' */ 'mode' ], methods: ['getHours', 'getMinutes', 'getMeridiem', 'updateField'] } }, autoSize: null, initialize: function() { var me = this; me.callParent(); if (me.getFloated()) { me.el.dom.setAttribute('tabIndex', -1); me.el.on('mousedown', me.onMouseDown, me); } me.relayEvents(me.getView(), ['collapsePanel', 'select']); }, applyView: function(config, view) { return Ext.updateWidget(view, config, this, 'createView'); }, createView: function(config) { return this.mergeProxiedConfigs('view', config); }, updateView: function(view, oldView) { if (oldView) { Ext.destroy(oldView); } this.add(view); }, updateButtonAlign: function(align) { this.getView().setButtonAlign(align); }, onMouseDown: function(e) { e.preventDefault(); }});