Ext JS 6：将日期下拉字段修改为日期时间下拉字段（三）

完成了日期时间选择字段，要实现日期时间下拉字段就很简单了，这个只需要修改日期下拉字段的createPicker方法，将选取器换成日期时间选择字段就行了，具体代码如下：

Ext.define('Test.ux.form.field.Datetime', {    extend:'Ext.form.field.Date',    alias: 'widget.datetimefield',    requires: ['Test.ux.picker.Datetime2'],    createPicker: function() {        var me = this,            format = Ext.String.format;        // Create floating Picker BoundList. It will acquire a floatParent by looking up         // its ancestor hierarchy (Pickers use their pickerField property as an upward link)         // for a floating component.         return new Test.ux.picker.Datetime2({            id: me.id + '-picker',            pickerField: me,            floating: true,            preventRefocus: true,            hidden: true,            minDate: me.minValue,            maxDate: me.maxValue,            disabledDatesRE: me.disabledDatesRE,            disabledDatesText: me.disabledDatesText,            ariaDisabledDatesText: me.ariaDisabledDatesText,            disabledDays: me.disabledDays,            disabledDaysText: me.disabledDaysText,            ariaDisabledDaysText: me.ariaDisabledDaysText,            format: me.format,            showToday: me.showToday,            startDay: me.startDay,            minText: format(me.minText, me.formatDate(me.minValue)),            ariaMinText: format(me.ariaMinText, me.formatDate(me.minValue, me.ariaFormat)),            maxText: format(me.maxText, me.formatDate(me.maxValue)),            ariaMaxText: format(me.ariaMaxText, me.formatDate(me.maxValue, me.ariaFormat)),            listeners: {                scope: me,                select: me.onSelect,                tabout: me.onTabOut            },            keyNavConfig: {                esc: function() {                    me.inputEl.focus();                    me.collapse();                }            }        });    }});

主要修改的地方只是简单的将createPicker方法中的Ext.picker.Date替换为Test.ux.picker.Datetime2。

在使用的时候发现个问题，就是时间字段字段点不进去，经过调试，发现在日期选择字段中，当它作为日期下拉选择字段的选择器来使用的时候，会把MouseDown事件都屏蔽了，具体代码如下：

    onMouseDown: function(e) {        e.preventDefault();    },

我们需要做的就是重写该方法，当单击的组件是数字字段时，允许单击操作，具体代码如下：

    onMouseDown: function(e) {        var cmp = Ext.Component.fromElement(e.target);        if (cmp.isFormField) return;        e.preventDefault();    },    

代码先通过触发事件的元素返回对应的组件，然后判断组件是否表单字段，如果是，则返回，不阻止事件，否则，阻止事件。

至此，日期时间下拉字段就完成了。