ExtJS itemmouseenter（鼠標懸停）網格行並將單元格文本更改爲圖像

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/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的答案應該會導致更好的性能ANCE。

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