【问题标题】: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 无法处理文档中列出的 specialkeykeypress 事件,并且尝试添加它们无论如何都行不通。

如何将specialkeykeypress 事件添加到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)时遇到了同样的问题。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-06-16
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多