ExtJS itemmouseenter(mouseover) 网格行并将单元格文本更改为图像

Question

您好，当我在网格行上使用 itemmouseenter（鼠标悬停）时，我尝试将单元格文本更改为图像。

我有一个这样的事件监听器：

itemmouseenter: function(me, record, item, index, e, eOpts) {
    var store = this.getStore();
    var rowIndex = index;
    store.getAt(rowIndex).set('name', '<img src="http://sstatic.net/Whosebug/img/icon-16.png" />');
}

实际上，它把文字变成了图片，但无法变回原来的文字。

我的目标就是css悬停效果。有什么建议可以做到这一点吗？

谢谢

Fiddle Sample

Answer 1

试试这个方法。已更新 fiddle

listeners: {
    itemmouseenter: function(me, record, item, index, e, eOpts) {
        record.set('_name', record.get('name'));
        record.set('name', '<img src="http://sstatic.net/Whosebug/img/icon-16.png" />');
    },
    itemmouseleave: function(me, record, item, index, e, eOpts) {
        record.set('name', record.get('_name'));
    }
}

Answer 2

如果使用record.set，会使网格刷新，影响性能。为此，我宁愿使用不会导致刷新的 CSS。

看看这个 fiddle：https://fiddle.sencha.com/#fiddle/11st

需要注意两点：

网格上没有听众
查看 styles.css 文件以查看 :hover 的使用和更改 display 样式

使用 CSS 而不是像 Gilsha 的回答那样的 JavaScript 应该会带来更好的性能。

ExtJS itemmouseenter(mouseover) 网格行并将单元格文本更改为图像

ExtJS itemmouseenter(mouseover) grid row and change cell text to image

javascript

css

extjs

extjs5