ExtJS自定义控件 之一：datetimefield控件

这一年都在使用ExtJS 5.0开发系统，经常会遇到的一个场景就是时间日期的选择了。比如说，预定场地的时候就必须由用户选择预定的日期和时间。

可惜的是，ExtJS 5.0没有自带一个可以同时选择日期时间的控件（ExtJS 6.0已经推出了，还没用过，不知道加入这种控件没~），通常偷懒的做法就是，先放一个日期控件，然后再放一个时间控件。用户使用的时候，先选择日期，再选择时间，最后用很别扭的办法将日期和时间拼装起来。

理想的状态是，提供给用户一个可以同时选择时间和日期的控件，并且数据是“日期+时间”的Date类型。既符合使用习惯，又方便开发。

故第二种偷懒的方式是，从网上扒一个现成的解决方案来用。此法最快，但是在过程中遇到了一个问题，现成可以搜索到的方案都有点旧，大多数还停留在ExtJS 2.X、3.X和4.X版本，自从ExtJS从4升级到5之后，API改变了许多，所以并不能直接使用。

最后只能是自己写一个。准确来说，应该是拿了一份现成的代码修改，这个代码在ExtJS 5.0下不能正确运行，但是需要修改的量非常少，所以很感谢这份现成代码的作者，可惜没有署名，不知道是谁。

ExtJS 5.0上测试成功，实现方法是：

自定义一个时间选择器TimePickerField，继承自Ext.form.field.Base，由三个NumberField组成。

	Ext.define('MyApp.ux.DateTimeField.TimePickerField', {
		extend: 'Ext.form.field.Base',
		alias: 'widget.timepicker',
		
		alternateClassName: 'Ext.form.field.TimePickerField',
		
		requires: ['Ext.form.field.Number'],
		inputType: 'text',
		fieldLabel: '时间',
		labelWidth: 40,
		style: 'padding:4px 0; margin: 0; ',
		value: null,
		spinnerCfg: {
			width: 50,
		},
		
		initComponent: function() {
			var me = this;
			me.value = me.value || Ext.Date.format(new Date(), 'H:i:s');
			me.callParent(arguments);
			me.spinners = [];
			var cfg = Ext.apply({}, me.spinnerCfg, {
	//			readOnly: me.readOnly,
				disabled: me.disabled,
				style: 'float: left',
				listeners: {
				  change: {
					fn: me.onSpinnerChange,
					scope: me
				  }
				}
			});
			me.hoursSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
	//			minValue: -1,
	//			maxValue: 24,
					minNum: 0,
					maxNum: 23,
			  }));
			me.minutesSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
	//			minValue: -1,
	//			maxValue: 60,
						minNum: 0,
						maxNum: 59,
			  }));
			me.secondsSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
	//			minValue: