torsten@273: /**
torsten@273: * 时间输入框, 三个整数框分别输入时,分,秒.
torsten@273: * @author wangzilong
torsten@273: * update Ext - 4.1 2012/04/27
torsten@273: */
torsten@273: Ext.define('Ext.ux.form.TimePickerField', {
torsten@273: extend: 'Ext.form.field.Base',
torsten@273: alias: 'widget.timepicker',
torsten@273: alternateClassName: 'Ext.form.field.TimePickerField',
torsten@273: requires: ['Ext.form.field.Number'],
torsten@273:
torsten@273: // 隐藏BaseField的输入框 , hidden basefield's input
torsten@273: inputType: 'hidden',
torsten@273:
torsten@273: style: 'padding:4px 0 0 0;margin-bottom:0px',
torsten@273:
torsten@273: /**
torsten@273: * @cfg {String} value
torsten@273: * initValue, format: 'H:i:s'
torsten@273: */
torsten@273: value: null,
torsten@273:
torsten@273: /**
torsten@273: * @cfg {Object} spinnerCfg
torsten@273: * 数字输入框参数, number input config
torsten@273: */
torsten@273: spinnerCfg: {
torsten@273: width: 40
torsten@273: },
torsten@273:
torsten@273: /** Override. */
torsten@273: initComponent: function() {
torsten@273: var me = this;
torsten@273:
torsten@273: me.value = me.value || Ext.Date.format(new Date(), 'H:i:s');
torsten@273:
torsten@273: me.callParent();// called setValue
torsten@273:
torsten@273: me.spinners = [];
torsten@273: var cfg = Ext.apply({}, me.spinnerCfg, {
torsten@273: readOnly: me.readOnly,
torsten@273: disabled: me.disabled,
torsten@273: style: 'float: left',
torsten@273: listeners: {
torsten@273: change: {
torsten@273: fn: me.onSpinnerChange,
torsten@273: scope: me
torsten@273: }
torsten@273: }
torsten@273: });
torsten@273:
torsten@273: me.hoursSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
torsten@273: minValue: 0,
torsten@273: maxValue: 23
torsten@273: }));
torsten@273: me.minutesSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
torsten@273: minValue: 0,
torsten@273: maxValue: 59
torsten@273: }));
torsten@273: // TODO 使用timeformat 判断是否创建秒输入框, maybe second field is not always need.
torsten@273: me.secondsSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
torsten@273: minValue: 0,
torsten@273: maxValue: 59
torsten@273: }));
torsten@273:
torsten@273: me.spinners.push(me.hoursSpinner, me.minutesSpinner, me.secondsSpinner);
torsten@273:
torsten@273: },
torsten@273: /**
torsten@273: * @private
torsten@273: * Override.
torsten@273: */
torsten@273: onRender: function() {
torsten@273: var me = this, spinnerWrapDom, spinnerWrap;
torsten@273: me.callParent(arguments);
torsten@273:
torsten@273: // render to original BaseField input td
torsten@273: // spinnerWrap = Ext.get(Ext.DomQuery.selectNode('div', this.el.dom)); // 4.0.2
torsten@273: spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[1]; // 4.0 ->4.1 div->td
torsten@273: spinnerWrap = Ext.get(spinnerWrapDom);
torsten@273: me.callSpinnersFunction('render', spinnerWrap);
torsten@273:
torsten@273: Ext.core.DomHelper.append(spinnerWrap, {
torsten@273: tag: 'div',
torsten@273: cls: 'x-form-clear-left'
torsten@273: });
torsten@273:
torsten@273: this.setRawValue(this.value);
torsten@273: },
torsten@273:
torsten@273: _valueSplit: function(v) {
torsten@273: if(Ext.isDate(v)) {
torsten@273: v = Ext.Date.format(v, 'H:i:s');
torsten@273: }
torsten@273: var split = v.split(':');
torsten@273: return {
torsten@273: h: split.length > 0 ? split[0] : 0,
torsten@273: m: split.length > 1 ? split[1] : 0,
torsten@273: s: split.length > 2 ? split[2] : 0
torsten@273: };
torsten@273: },
torsten@273: onSpinnerChange: function() {
torsten@273: if(!this.rendered) {
torsten@273: return;
torsten@273: }
torsten@273: this.fireEvent('change', this, this.getValue(), this.getRawValue());
torsten@273: },
torsten@273: // 依次调用各输入框函数, call each spinner's function
torsten@273: callSpinnersFunction: function(funName, args) {
torsten@273: for(var i = 0; i < this.spinners.length; i++) {
torsten@273: this.spinners[i][funName](args);
torsten@273: }
torsten@273: },
torsten@273: // @private get time as object,
torsten@273: getRawValue: function() {
torsten@273: if(!this.rendered) {
torsten@273: var date = this.value || new Date();
torsten@273: return this._valueSplit(date);
torsten@273: } else {
torsten@273: return {
torsten@273: h: this.hoursSpinner.getValue(),
torsten@273: m: this.minutesSpinner.getValue(),
torsten@273: s: this.secondsSpinner.getValue()
torsten@273: };
torsten@273: }
torsten@273: },
torsten@273:
torsten@273: // private
torsten@273: setRawValue: function(value) {
torsten@273: value = this._valueSplit(value);
torsten@273: if(this.hoursSpinner) {
torsten@273: this.hoursSpinner.setValue(value.h);
torsten@273: this.minutesSpinner.setValue(value.m);
torsten@273: this.secondsSpinner.setValue(value.s);
torsten@273: }
torsten@273: },
torsten@273: // overwrite
torsten@273: getValue: function() {
torsten@273: var v = this.getRawValue();
torsten@273: return Ext.String.leftPad(v.h, 2, '0') + ':' + Ext.String.leftPad(v.m, 2, '0') + ':'
torsten@273: + Ext.String.leftPad(v.s, 2, '0');
torsten@273: },
torsten@273: // overwrite
torsten@273: setValue: function(value) {
torsten@273: this.value = Ext.isDate(value) ? Ext.Date.format(value, 'H:i:s') : value;
torsten@273: if(!this.rendered) {
torsten@273: return;
torsten@273: }
torsten@273: this.setRawValue(this.value);
torsten@273: this.validate();
torsten@273: },
torsten@273: // overwrite
torsten@273: disable: function() {
torsten@273: this.callParent(arguments);
torsten@273: this.callSpinnersFunction('disable', arguments);
torsten@273: },
torsten@273: // overwrite
torsten@273: enable: function() {
torsten@273: this.callParent(arguments);
torsten@273: this.callSpinnersFunction('enable', arguments);
torsten@273: },
torsten@273: // overwrite
torsten@273: setReadOnly: function() {
torsten@273: this.callParent(arguments);
torsten@273: this.callSpinnersFunction('setReadOnly', arguments);
torsten@273: },
torsten@273: // overwrite
torsten@273: clearInvalid: function() {
torsten@273: this.callParent(arguments);
torsten@273: this.callSpinnersFunction('clearInvalid', arguments);
torsten@273: },
torsten@273: // overwrite
torsten@273: isValid: function(preventMark) {
torsten@273: return this.hoursSpinner.isValid(preventMark) && this.minutesSpinner.isValid(preventMark)
torsten@273: && this.secondsSpinner.isValid(preventMark);
torsten@273: },
torsten@273: // overwrite
torsten@273: validate: function() {
torsten@273: return this.hoursSpinner.validate() && this.minutesSpinner.validate() && this.secondsSpinner.validate();
torsten@273: }
torsten@273: });