如何临时突出显示 Ext JS 网格面板的可编辑列（4.2.1 版）答案

【问题标题】：How to temporarily highlight editable columns of Ext JS grid panel (version 4.2.1)如何临时突出显示 Ext JS 网格面板的可编辑列（4.2.1 版）
【发布时间】：2013-11-04 04:40:54
【问题描述】：

我正在使用 ExtJS 4.2.1 的网格面板。我有一些带有编辑器的列定义：'textfield'（可编辑的列）和一些没有编辑器的列定义（只读列）。

我想要什么？

我想在鼠标悬停事件中用背景颜色临时突出显示该特定列的可编辑列。

我请求帮助。请指导。我花了很多时间在这上面，但都是徒劳的:(

问候，贾格普利特·辛格

任务 - 当鼠标放在下面的可编辑 1 和 2 列上时（具有编辑器配置选项），我希望目标列用一些明亮的颜色暂时突出显示几秒钟。

Ext.define('XX.view.account.Portfolios', {
extend : 'Ext.grid.Panel',
plugins : {
    ptype : 'cellediting',
    clicksToEdit : 1
},
columns : [{
    text : 'Read Only 1',
    flex : 1,
    sortable : true,
    dataIndex : 'ro1'
}, {
    text : 'Read Only 2',
    flex : 2,
    sortable : true,
    dataIndex : 'ro2'
}, {
    text : 'MV',
    flex : 1,
    sortable : true,
    dataIndex : 'mv'
}, {
    text : 'Editable 1',
    flex : 1,
    sortable : true,
    dataIndex : 'e1',
    editor : 'textfield'
}, {
    text : 'Editable 2',
    flex : 1,
    sortable : true,
    dataIndex : 'e2',
    editor : 'textfield'
}

【问题讨论】：

捕获鼠标悬停事件并使用 .getEl().highlight() 方法。

标签： extjs

【解决方案1】：

这里还有一个 CSS 动画选项：https://fiddle.sencha.com/#fiddle/16a

【讨论】：

问题可能是不支持 CSS 动画的 IE 版本。 IE 就是这样一个 PITA :(

【解决方案2】：

正如 Lorenz 建议的那样，您可以捕获 itemmouseenter 事件，然后调用 highlight 方法突出显示可编辑的行，以便仅突出显示与您可能可以关联的编辑器的单元格使用应用于这些列的类，然后在鼠标输入事件处理程序上选择匹配的元素，如下所示：

itemmouseenter: function (grid, record, item, index, e, eOpts) {
        var node = grid.getNode(record);
        var cells = Ext.dom.Query.select('.editable-cell', node);

        for (var i = 0; i < cells.length; i++) {
            Ext.fly(cells[i]).highlight();
        }
    }

您可以看到working sample here。希望对解决您的问题有所帮助

【讨论】：

我说不出话来感谢你。大帮助。太感谢了。效果很好:)
不能在 IE 上工作 :( 我用的是 IE9。请指导。我也试过下面提到的动画 css 选项。没有工作。
您的问题解决了吗？如果不能，您可以提供示例代码以便我试一试吗？抱歉，我整个周末都不在电脑前，回复延迟
此解决方案适用于 Firefox，但不适用于 IE (9)。我还尝试了下面提到的另一个选项 - CSS 动画，但这在 IE (9) 上也不起作用。只需在 IE (9) 上打开上面提供的工作示例。感谢您的帮助。