/** * 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: * * ```javascript * @example({ framework: 'extjs' }) * Ext.create('Ext.form.Panel', { * fullscreen: true, * items: [ * { * xtype: 'timepanel', * shadow: true * } * ] * }); * ``` * ```javascript * @example({framework: 'ext-react', packages:['ext-react']}) * import { ExtContainer, ExtTimePanel } from '@sencha/ext-react'; * import React, { Component } from 'react'; * export default class TimeExample extends Component { * render() { * return ( * <ExtContainer padding={10} layout={'auto'}> * <ExtTimePanel shadow/> * </ExtContainer> * ) * } * } * ``` * ```javascript * @example({framework: 'ext-angular', packages:['ext-angular']}) * import { Component } from '@angular/core' * declare var Ext: any; * * @Component({ * selector: 'app-root-1', * styles: [``], * template: ` * <ExtContainer [padding]="10" [layout]="'auto'"> * <ExtTimePanel shadow="true"></ExtTimePanel> * </ExtContainer> * ` * }) * export class AppComponent {} * ``` * ```html * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 }) * <ext-container padding={10} layout='{"auto"}'> * <ext-timepanel shadow></ext-timepanel> * </ext-container> * ``` * ```javascript * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 }) * import '@sencha/ext-web-components/dist/ext-container.component'; * import '@sencha/ext-web-components/dist/ext-timepanel.component'; * * export default class TimeComponent {} */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', /** * @cfg {Boolean} meridiem * Defaults to true for 12 hour format for Time Panel. */ 'meridiem', /** * @cfg {Boolean} alignPMInside * Default false. */ 'alignPMInside', /** * @cfg {string} hourDisplayFormat * Accepted values are `G` or `H` * Default G * See {@link Ext.Date} for details. * @since 7.0 */ 'hourDisplayFormat' ], methods: ['getHours', 'getMinutes', '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(); }});