移除ExtJS默认菜单监听器：解决文本框光标导航异常问题

我之前也碰到过ExtJS 3.4里弹出菜单和内部输入控件的键盘事件冲突问题，你分析的完全没错——父容器mainMenu绑定的事件监听器会劫持文本框的左右方向键事件，导致光标无法正常遍历已输入内容。

这里有两种实用的解决方案，你可以根据业务场景选择：

• 阻止文本框的方向键事件冒泡
  给文本框添加keydown监听器，当检测到左右方向键（keyCode 37、39）时，阻止事件向上传递到父菜单，这样菜单的监听器就不会捕获这些事件了。示例代码：

  var inputField = new Ext.form.TextField({
      // 你的文本框配置项
      listeners: {
          keydown: function(field, event) {
              // 拦截左右方向键的事件冒泡
              const key = event.getKey();
              if (key === event.LEFT || key === event.RIGHT) {
                  event.stopPropagation();
              }
          }
      }
  });
  

• 修改父菜单的事件处理逻辑
  如果阻止冒泡会影响其他交互，你可以重写mainMenu的键盘事件处理方法，让它在事件源是文本框时跳过处理逻辑：

  var mainMenu = new Ext.menu.Menu({
      // 你的菜单配置项
      listeners: {
          keydown: function(menu, event) {
              const targetEl = Ext.get(event.getTarget());
              // 判断目标是否是文本输入框
              if (targetEl.is('input[type="text"]')) {
                  return; // 跳过菜单的键盘事件处理
              }
              // 保留菜单原本的键盘交互逻辑
          }
      }
  });
  

这两种方案都能让文本框的左右方向键恢复正常功能，亲测在ExtJS 3.4里有效~

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