ExtJS在不同浏览器表现不一致问题求助

嘿，我发现你的问题出在IE浏览器不支持原生的Element.closest()方法！这个DOM API在Chrome等现代浏览器里能用，但IE（尤其是IE11及更早版本）压根没实现它，所以你代码里combo.el.dom.closest('td')这行在IE里会直接报错，导致背景色切换功能罢工。

下面给你几个靠谱的解决方案，挑一个适合你的：

方案1：用ExtJS自带的跨浏览器DOM方法（最推荐） #

ExtJS本身就提供了兼容所有目标浏览器的DOM操作工具，咱们可以用Ext.fly(combo.el).up('td')代替原生的closest()，这样不管是Chrome还是IE都能正常工作：

修改下拉框的select监听器代码：

listeners: {
    select: function(combo, record) {
        // 用ExtJS的up()方法向上查找父级td元素
        Ext.fly(combo.el).up('td').setStyle('background', record.get('value'));
    }
}

方案2：给IE补一个closest()的兼容补丁 #

如果你更习惯用原生DOM API，可以在代码最开头加上这段polyfill，让IE也能识别closest()方法：

// 为IE添加closest()方法的兼容补丁
if (!Element.prototype.closest) {
    Element.prototype.closest = function(selector) {
        var element = this;
        do {
            if (element.matches(selector)) return element;
            element = element.parentElement || element.parentNode;
        } while (element !== null && element.nodeType === 1);
        return null;
    };
}

加完这个补丁后，你原来的代码就不用改了，直接在IE里就能跑起来。

方案3：利用ExtJS布局的组件关联属性 #

还有一种方式，就是借助ExtJS表格布局给组件注入的cell属性，直接拿到对应的单元格元素：

listeners: {
    select: function(combo, record) {
        // 直接通过组件的cell属性获取td元素
        combo.cell.setStyle('background', record.get('value'));
    }
}

这个方法也是完全跨浏览器兼容的，而且代码更简洁。

小提示 #

优先选方案1哦，这是ExtJS官方推荐的跨浏览器操作方式，能避免很多原生API的兼容性坑。修改完之后，你的风险评估矩阵在IE里应该就能像在Chrome里一样正常切换背景色啦！

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