ExtJs 6.2中如何在DateField获取焦点时自动弹出DatePicker

我明白你的困扰——本来以为DateField自带这个开箱即用的功能，结果在ExtJS 6.2里折腾半天都没实现对吧？别慌，咱们来搞定这个小问题。

默认情况下，ExtJS的DateField确实不会在获焦时自动展开日历面板，但我们可以通过监听focus事件手动触发弹出操作，这里有两种实用的实现方式：

方式一：组件内直接配置监听 #

如果只是单个DateField需要这个功能，直接在组件配置里添加listeners即可：

Ext.create('Ext.form.field.Date', {
    renderTo: Ext.getBody(),
    fieldLabel: '选择日期',
    listeners: {
        focus: function(field) {
            // 先判断picker是否已展开，避免重复触发导致异常
            if (!field.isPickerVisible()) {
                field.showPicker();
            }
        }
    }
});

方式二：扩展类实现全局复用 #

如果项目里多个DateField都需要这个功能，重复写监听太麻烦，不如扩展一个自定义的DateField类：

Ext.define('MyApp.form.field.Date', {
    extend: 'Ext.form.field.Date',
    alias: 'widget.myDateField',
    
    initComponent: function() {
        this.callParent(arguments);
        // 绑定focus事件到自定义处理方法
        this.on('focus', this.onFocusShowPicker, this);
    },
    
    onFocusShowPicker: function(field) {
        if (!field.isPickerVisible()) {
            field.showPicker();
        }
    }
});

之后在需要的地方直接使用这个自定义组件就行：

Ext.create('MyApp.form.field.Date', {
    renderTo: Ext.getBody(),
    fieldLabel: '自定义日期选择器'
});

关键注意点 #

• 务必加上isPickerVisible()的判断！如果没有这个校验，当用户已经手动打开日历后，再次触发focus事件会导致picker反复开关，体验非常糟糕。
• 要是你用的是MVVM架构，也可以在视图控制器里监听组件的focus事件，核心逻辑和上面完全一致。

内容的提问来源于stack exchange，提问作者mwm4