ExtJS ComboBox按箭头键触发页面滚动的Chrome兼容问题

看起来你遇到的是Chrome浏览器下ExtJS组件的事件兼容性问题，结合你提到的控制台警告和场景差异，我整理了几个针对性的解决方案：

一、先解决核心的事件冒泡问题 #

Chrome中箭头键触发页面滚动，本质是ComboBox的键盘事件冒泡到了页面滚动容器。我们可以直接阻止箭头键事件的冒泡：

方式1：给单个ComboBox添加监听 #

在每个ComboBox的配置里加入keydown监听，拦截上下箭头的事件传播：

xtype: 'combobox',
// 其他配置...
listeners: {
    keydown: function(combo, e) {
        // 当按下上下箭头时，阻止事件冒泡到外层容器
        if (e.getKey() === e.UP || e.getKey() === e.DOWN) {
            e.stopPropagation();
        }
    },
    // 你原有的select监听代码...
}

方式2：全局统一处理所有ComboBox #

如果有多个ComboBox，不想重复写代码，可以用全局监听：

Ext.onReady(function() {
    // 给所有ComboBox类添加全局keydown监听
    Ext.util.Observable.observeClass(Ext.form.field.ComboBox, {
        keydown: function(combo, e) {
            if (e.getKey() === e.UP || e.getKey() === e.DOWN) {
                e.stopPropagation();
            }
        }
    });
});

二、修复控制台的Passive事件警告 #

那个mousewheel事件的警告是Chrome对滚动性能的严格要求导致的，旧版ExtJS可能没给滚动事件添加passive标记。我们可以重写ExtJS的元素监听方法来解决：

Ext.define('Override.dom.Element', {
    override: 'Ext.dom.Element',
    addListener: function(eventName, fn, scope, options) {
        // 给mousewheel和wheel事件添加passive选项
        if (eventName === 'mousewheel' || eventName === 'wheel') {
            options = Ext.apply({}, options);
            options.passive = true;
        }
        return this.callParent([eventName, fn, scope, options]);
    }
});

这个重写会自动给所有滚动事件监听加上passive标记，既解决警告，也能提升页面滚动响应性，间接减少冲突概率。

三、排查Fiddle与生产环境的差异 #

你提到在Sencha Fiddle中正常，生产环境出问题，建议检查这几点：

• ExtJS版本：确认Fiddle使用的版本和生产环境是否一致，升级到6.2.0+的版本，官方可能已经修复了Chrome下的滚动兼容问题。
• 页面滚动容器：生产环境页面是否有额外的滚动样式（比如body/html设置了overflow:auto），可以尝试给你的TabPanel容器添加overflow: hidden：

#myContainer {
    overflow: hidden !important;
}

四、临时应急方案：下拉展开时禁用页面滚动 #

如果上面的方法都没生效，可以用粗暴但有效的方式：当下拉框展开时禁用页面滚动，收起时恢复：

xtype: 'combobox',
// 其他配置...
listeners: {
    expand: function(combo) {
        // 禁用页面滚动
        Ext.getBody().setStyle('overflow', 'hidden');
    },
    collapse: function(combo) {
        // 恢复页面滚动
        Ext.getBody().setStyle('overflow', 'auto');
    },
    // 你原有的select监听代码...
}

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