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

Question

嗨我试图在迭代（鼠标悬停）网格行时将单元格文本更改为图像。

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

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/stackoverflow/img/icon-16.png" />');
}

实际上，它将文字更改为图片，但无法更改回原始文字。

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

由于

Fiddle Sample

Answer 1

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

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

要看两件事：

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

使用CSS代替JavaScript，像Gilsha的答案应该会带来更好的表现。

Answer 2

试试这种方式。更新了fiddle

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