ExtJS itemmouseenter (mouseover) строка сетки и сменить текст ячейки для изображения

Question

Привет Я попытался изменить текст ячейки на изображение, когда я itemmouseenter (mouseover) строка сетки.

У меня есть слушатель события, как это:

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, как ответ Гильши должен привести к более эффективному выполнению Анс.

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