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上测试成功，实现方法是：

1、自定义一个时间选择器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: -1,    //          MAXVALUE: 60,                        minNum: 0,                        maxNum: 59,              }));            me.spinners.push(me.hoursSpinner, me.minutesSpinner, me.secondsSpinner);        },        onRender: function() {            var me = this, spinnerWrapDom, spinnerWrap;            me.callParent(arguments);            spinnerWrap = Ext.get(Ext.DomQuery.selectNode('div', this.el.dom));            me.callSpinnersFunction('render', spinnerWrap);            this.el.dom.getElementsByTagName('input')[0].style.display = 'none';            var newTimePicker = Ext.DomHelper.append(spinnerWrap, {                tag: 'div',                cls: 'x-form-clear-left'            }, true);            this.setRawValue(this.value);        },        _valueSplit: function(v) {            if(Ext.isDate(v)) {              v = Ext.Date.format(v, 'H:i:s');            }            var split = v.split(':');            return {                h: split.length > 0 ? split[0] : 0,                m: split.length > 1 ? split[1] : 0,                s: split.length > 2 ? split[2] : 0            };        },        onSpinnerChange: function() {            if(!this.rendered) {              return;            }            //限制时间范围            var args = arguments; //this, newValue, oldValue, eOpts            args[0].setValue( (args[1]>args[0].maxNum) ? args[0].minNum : args[0].value );            args[0].setValue( (args[1]<args[0].minNum) ? args[0].maxNum : args[0].value );            this.fireEvent('change', this, this.getValue(), this.getRawValue());        },        // 依次调用各输入框函数, call each spinner's function        callSpinnersFunction: function(funName, args) {            for(var i = 0; i < this.spinners.length; i++) {                if( this.spinners[i][funName] != null && this.spinners[i][funName] != undefined ){                    this.spinners[i][funName](args);                }            }        },        getRawValue: function() {            if(!this.rendered) {                var date = this.value || new Date();                return this._valueSplit(date);            }            else {                return {                h: this.hoursSpinner.getValue(),                m: this.minutesSpinner.getValue(),                s: this.secondsSpinner.getValue()                };            }        },        setRawValue: function(value) {            var v = this._valueSplit(value);            if(this.hoursSpinner) {                this.hoursSpinner.setValue(v.h);                this.minutesSpinner.setValue(v.m);                this.secondsSpinner.setValue(v.s);            }        },        getValue: function() {            var v = this.getRawValue();            return Ext.String.leftPad(v.h, 2, '0') + ':' + Ext.String.leftPad(v.m, 2, '0') + ':'            + Ext.String.leftPad(v.s, 2, '0');        },        setValue: function(value) {            this.value = Ext.isDate(value) ? Ext.Date.format(value, 'H:i:s') : value;            if(!this.rendered) {                return;            }            this.setRawValue(this.value);            this.validate();        },        disable: function() {            this.callParent(arguments);            this.callSpinnersFunction('disable', arguments);        },        enable: function() {            this.callParent(arguments);            this.callSpinnersFunction('enable', arguments);        },        setReadOnly: function() {            this.callParent(arguments);            this.callSpinnersFunction('setReadOnly', arguments);        },        clearInvalid: function() {            this.callParent(arguments);            this.callSpinnersFunction('clearInvalid', arguments);        },        isValid: function(preventMark) {            return this.hoursSpinner.isValid(preventMark) && this.minutesSpinner.isValid(preventMark)            && this.secondsSpinner.isValid(preventMark);        },        validate: function() {            return this.hoursSpinner.validate() && this.minutesSpinner.validate() && this.secondsSpinner.validate();        }    });

2、自定义一个DateTimePicker，继承自Ext.picker.Date，实际上就是在原有的DateField的基础上增加TimePicker和一个确认按键。

    Ext.define('MyApp.ux.DateTimeField.DateTimePicker', {        extend: 'Ext.picker.Date',        alias: 'widget.datetimepicker',        requires: ['MyApp.ux.DateTimeField.TimePickerField','Ext.dom.Query'],        todayText: '现在',        timeLabel: '时间',        buttonText: '确定',        initComponent: function() {            this.callParent();            this.value = this.value || new Date();        },        onRender: function(container, position) {            this.callParent(arguments);            var me = this;            //确认按键            var btnCfg = Ext.apply({}, {}, {                style: 'center',                listeners: {                    click: {                        fn: function(){                            this.confirmDate();                        },                        scope: me                    }                }                });            me.confirmBtn = Ext.create('Ext.Button', Ext.apply({}, btnCfg, {                text: '确认',            }));            me.confirmBtn.render(this.el.child('div div.x-datepicker-footer'));            if(!this.timefield) {                this.timefield = Ext.create('MyApp.ux.DateTimeField.TimePickerField', {                    fieldLabel: this.timeLabel,                    labelWidth: 40,                    value: Ext.Date.format(this.value, 'H:i:s'),                });            }            this.timefield.ownerCt = this;//指定范围            this.timefield.on('change', this.timeChange, this);//            var table = Ext.get(Ext.DomQuery.selectNode('table', this.el.dom));            var tfEl = Ext.DomHelper.insertAfter(table, {                tag: 'div',                style: 'border:0px;',                children: [{                    tag: 'div',                    cls: 'x-datepicker-footer ux-timefield'                }]            }, true);            this.timefield.render(this.el.child('div div.ux-timefield'));            var p = this.getEl().parent('div.x-layer');            if(p) {                p.setStyle("height", p.getHeight() + 31);            }        },        // listener 时间域修改, timefield change        timeChange: function(tf, time, rawtime) {            this.value = this.fillDateTime(this.value);        },        fillDateTime: function(value) {            if(this.timefield) {                var rawtime = this.timefield.getRawValue();                value.setHours(rawtime.h);                value.setMinutes(rawtime.m);                value.setSeconds(rawtime.s);            }            return value;        },        changeTimeFiledValue: function(value) {            this.timefield.un('change', this.timeChange, this);            this.timefield.setValue(this.value);            this.timefield.on('change', this.timeChange, this);        },        setValue: function(value) {            this.value = value;            this.changeTimeFiledValue(value);            return this.update(this.value);        },        getValue: function() {            return this.fillDateTime(this.value);        },        handleDateClick: function(e, t) {            var me = this,                handler = me.handler;            e.stopEvent();            if(!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {                me.doCancelFocus = me.focusOnSelect === false;                me.setValue(this.fillDateTime(new Date(t.dateValue)));                delete me.doCancelFocus;                me.fireEvent('select', me, me.value);                if(handler) {                handler.call(me.scope || me, me, me.value);                }                me.onSelect();            }        },        //确认按键         confirmDate: function(){                var that = this;                    that.fireEvent('select', that, that.value);//模拟用户选择                    that.onSelect();        },        selectToday: function() {            var me = this,                btn = me.todayBtn,                handler = me.handler;            if(btn && !btn.disabled) {                me.setValue(new Date());                me.fireEvent('select', me, me.value);                if(handler) {                handler.call(me.scope || me, me, me.value);                }                me.onSelect();            }            return me;        }    });

3、将DateTimePicker装载到Ext.form.field.Date中，初始化日期时间的格式。

    Ext.define('MyApp.ux.DateTimeField.DateTimeField', {            extend: 'Ext.form.field.Date',            alias: 'widget.datetimefield',            requires: ['MyApp.ux.DateTimeField.DateTimePicker'],            initComponent: function() {                this.format = this.format;                this.callParent();            },            format: 'Y-m-d H:i:s',            createPicker: function() {                var me = this,                        format = Ext.String.format;                return Ext.create('MyApp.ux.DateTimeField.DateTimePicker', {                        ownerCt: me.ownerCt,    //                  renderTo: document.body,                        floating: true,    //                  hidden: true,                        focusOnShow: true,                        minDate: me.minValue,                        maxDate: me.maxValue,                        disabledDatesRE: me.disabledDatesRE,                        disabledDatesText: me.disabledDatesText,                        disabledDays: me.disabledDays,                        disabledDaysText: me.disabledDaysText,                        format: me.format,                        showToday: me.showToday,                        startDay: me.startDay,                        minText: format(me.minText, me.formatDate(me.minValue)),                        maxText: format(me.maxText, me.formatDate(me.maxValue)),                        listeners: {                                scope: me,                                select: me.onSelect                        },                        keyNavConfig: {                                esc: function() {                                    me.collapse();                                }                        }                    });            }    });

将以上代码拷到ux当中，调用的时候可以Ext.create之，也可以require之后直接使用alias。
效果嘛，就像下图那样：

介绍完毕。
谢谢大家。