添加按键事件的ExtJS的DatePicker

从我的问题关于设置datefield删除其价值和关闭继datepicker当“删除”被按下，datepicker是开放的（here），我是针对添加keypress或specialkey听众对ExtJS datepicker有疑问。添加按键事件的ExtJS的DatePicker

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

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

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

来源

2014-05-15 David Smithson

找到了答案 -

给定的DateField，添加以下监听器：

{ 
    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确保不管日期字段被选中，只要它连接了监听器，它将确保日期字段上存在键绑定，从而允许期望的行为。

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

来源

2014-06-06 13:14:22

没有比你的解决方案更优雅，但也许没有地图更直观一点。

{ 
    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）同样的问题。

来源

2016-02-09 18:01:08

添加按键事件的ExtJS的DatePicker

回答

相关问题