ExtJS 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();
    },   

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

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