添加按鍵事件的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

回答

相關問題