1

我正在使用 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'
}
4

2 回答 2

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();
        }
    }

您可以在此处查看工作示例。希望它有助于解决您的问题

于 2013-10-25T08:38:36.053 回答
1

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

于 2013-10-25T09:35:05.030 回答