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