将按键事件添加到 ExtJS DatePicker

Posted 2023-02-22

【中文标题】将按键事件添加到 ExtJS DatePicker

【英文标题】：Adding key press event to ExtJS DatePicker

【发布时间】：2014-07-03 23:40:27

【问题描述】：

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

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

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

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

【参考方案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）时遇到了同样的问题。