将按键事件添加到 ExtJS DatePicker答案

【问题标题】：Adding key press event to ExtJS DatePicker将按键事件添加到 ExtJS DatePicker
【发布时间】：2014-07-03 23:40:27
【问题描述】：

根据我关于设置datefield 以删除其值并在按下“删除”且datepicker 已打开（here）时关闭其datepicker 的问题（here），我被指示添加@987654325 @ 或 specialkey ExtJS 上的侦听器 datepicker 有问题。

不幸的是，datepicker 无法处理文档中列出的 specialkey 或 keypress 事件，并且尝试添加它们无论如何都行不通。

如何将specialkey 或keypress 事件添加到ExtJS datepicker？

如果对此有更笼统的问题/答案，请提前道歉；我不知道要搜索什么才能获得相关结果。

【问题讨论】：

标签： extjs datepicker listener

【解决方案1】：

找到答案 -

给定一个日期字段，添加以下监听器：

{
    xtype: 'datefield',
    name: 'datefield_1',
    [other configs]
    listeners: {
        specialkey: function(field, e){
            if (e.getKey() == e.DELETE) {
                field.setValue('');
            }
        },
        focus: function(field, the, e){
            addKeyMap(field, the, e);
        }
    }
}

然后添加一个我为简洁起见称为 addKeyMap 的函数：

function addKeyMap(field, the, e){
    var picker = field.getPicker();
    picker.keyNav.map.addBinding({
        key: Ext.EventObject.DELETE,
        fn: function(keyCode, e) {
            field.setValue('');
            picker.hide();
        },
        scope: this,
        defaultEventAction: 'preventDefault'
    });
}

addKeyMap 确保无论选择哪个日期字段，只要它附加了侦听器，它就会确保键绑定存在于日期字段上，从而实现所需的行为。

对此可能有更优雅的答案，但我还没有找到。

【讨论】：

【解决方案2】：

没有比您的解决方案更优雅，但没有地图可能更直观。

{
    xtype: 'datefield',
    (...)
    listeners: {
        afterrender: function() {                    
            var me = this;
            this.getPicker().on('afterrender', function() {
                this.el.on('keydown', me.nOnDatepickerKeydown, me); // add key listener to datepicker
            });
        }
    },
    nOnDatepickerKeydown: function(e) {
        switch (e.keyCode) {
            case e.DELETE:
                this.setValue(null); // remove value
                this.getPicker().hide(); // hide datepicker
                this.focus(); // focus datefield
                e.preventDefault(); // stop default key event
                break;
        }
    }
}

我在尝试修复空格键（理论上应该是select current date）功能（fiddle）时遇到了同样的问题。

【讨论】：