如何在ExtJS v6.5模板视图中禁用左右方向键？

我来帮你搞定这个问题——你之前尝试的两种方式没生效，核心原因是ExtJS的列表组件内部有自己的键盘导航逻辑，你监听的事件要么触发时机太晚，要么优先级不够，拦不住内部的导航处理。下面给你两个靠谱的解决方案：

方案一：重写列表的onKeyDown方法 #

这是最直接有效的方式，直接覆盖组件自带的键盘事件处理逻辑，把左右方向键的操作过滤掉：

Ext.define('YourApp.view.YourVerticalList', {
    extend: 'Ext.dataview.List',
    xtype: 'your-verticallist',

    onKeyDown: function(e) {
        // 拦截左(37)、右(39)方向键，不让父类处理
        if (e.getKey() === e.LEFT || e.getKey() === e.RIGHT) {
            e.preventDefault();
            e.stopPropagation();
            return;
        }
        // 其他按键正常执行原生的上下导航逻辑
        this.callParent([e]);
    }
});

方案二：用ExtJS事件监听+捕获模式拦截 #

如果你不想重写整个组件，也可以在视图初始化时添加一个捕获阶段的事件监听，确保你的逻辑先于组件内部执行：

initComponent: function() {
    this.callParent(arguments);
    
    this.on({
        keydown: function(e) {
            if (e.getKey() === e.LEFT || e.getKey() === e.RIGHT) {
                e.preventDefault();
                e.stopPropagation();
            }
        },
        // 关键！设置capture为true，让事件在捕获阶段触发，优先于组件内部处理
        capture: true
    });
}

为啥之前的方法不管用？ #

• 你用的itemkeydown事件是在列表项已经完成导航切换后才触发的，这时候再return false根本没法改变已经发生的导航行为。
• 直接监听DOM的keydown事件，因为ExtJS对事件做了封装，DOM事件的处理优先级低于组件内部的事件系统，所以拦不住内部的导航逻辑。

选一个适合你代码结构的方案就行，两种都能完美禁用左右方向键的导航功能。

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