Question

关于设置datefield以删除其值并关闭其datepicker时删除＆＃39;已被按下且datepicker已打开（here），我被指示在有问题的ExtJS keypress上添加specialkey或datepicker听众。

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

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

如果有更广泛的问题/答案，请提前道歉;我不知道要搜索什么来获得相关结果。

Answer 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确保无论选择哪个日期字段，只要附加了侦听器，就会确保日期字段上存在键绑定，从而实现所需的行为。

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

Answer 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）时遇到了同样的问题。

将按键事件添加到ExtJS DatePicker

2 个答案: