ExtJS 6.5.1 Modern工具箱keyMap失效问题咨询

核心成因 #

• 双工具箱实现进度差异：6.5.1版本下Classic工具箱的keyMap是成熟的内置组件能力，从组件渲染阶段就会自动完成键盘监听的绑定、事件分发、销毁回收全流程，因此同版本下Classic环境功能正常；而该版本的Modern工具箱并未正式落地keyMap配置的原生解析逻辑，对应的完整官方支持是ExtJS 6.6.0版本才新增的能力。你原本写在组件配置项中的keyMap字段，在6.5.1 Modern环境下不会被框架读取，仅作为普通自定义属性存在，不会触发任何绑定逻辑。
• 静默失效的触发逻辑：你观测到的“2020年10月前后功能正常，后续无业务代码变更就完全失效”的现象，本质是Sencha在后续更新6.5.1 Modern的CDN托管包时，移除了测试阶段临时附带的keyMap绑定逻辑。由于框架没有对未实现的配置项做校验，即便你写了完全正确的keyMap配置，也不会抛出任何错误提示，最终表现为功能静默失效。

修复方案 #

• 手动绑定替代框架配置解析
  在目标组件的initialized生命周期钩子中，直接使用Ext.util.KeyMap手动绑定键盘监听，取代原本依赖框架解析的keyMap配置，参考实现：

  // 以对话框组件配置为例
  {
    xtype: 'dialog',
    title: '测试弹窗',
    initialized: function(comp) {
      // 绑定组件根DOM元素的键盘监听
      const dialogKeyMap = Ext.create('Ext.util.KeyMap', comp.element);
      dialogKeyMap.addBinding({
        key: Ext.event.Event.ENTER,
        handler: function(e) {
          console.log("ENTER CLICKED");
          e.preventDefault();
        }
      });
      // 组件销毁时同步回收监听，避免内存泄漏
      comp.on('destroy', () => dialogKeyMap.destroy());
    }
  }
  

• 全局补丁批量兼容旧配置
  如果项目中已经写了大量依赖keyMap配置的组件，可以在项目入口、框架初始化完成后，给Ext.Component类打全局补丁：重写组件的元素初始化逻辑，自动识别组件配置中的keyMap项，完成监听绑定和销毁回收，完全复刻Classic工具箱的处理逻辑，无需逐组件修改原有keyMap配置。
• 版本升级方案
  若项目允许调整依赖版本，可单独将Modern工具箱升级到6.6.0及以上版本，该版本已正式内置所有组件的keyMap配置支持，原有配置无需修改即可正常运行。

内容的提问来源于stack exchange，提问作者WhoKnows