Question

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

我想要什么？

我想暂时将鼠标悬停事件背景颜色的可编辑列突出显示到该特定列。

我请求帮助。请指导。我花了很多时间和一切都是徒劳的：（

此致 Jagpreet Singh

任务 - 当鼠标放在下面的可编辑的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'
}

Answer 1

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

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。希望它有助于解决您的问题

Answer 2

CSS动画的另一个选项：https://fiddle.sencha.com/#fiddle/16a

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

2 个答案: