Ускорение работы grid за счет удаления подсветки строки по событию mouseover

В ходе оптимизации нашей странички РД возникла мысль о том, что у пользователя в IE8 наш здоровенный грид лагает из-за-то того, что при наведении на любую строку grid добавляет этой строке дополнительный класс и удаляет его с тех строк, над которыми уже нет курсора. Сама по себе операция то должна быть недолгая, но манипуляции с DOM-деревом (а наше дерево в рабочем состоянии включает больше 500 Кб)  лучше лишний раз не выполнять. В интернете у меня не получилось быстро найти решение проблемы, несмотря на то, что я натыкался на очень много вопросов по этой теме.

Кому-то не нравилось оформление, которое вешает ExtJs на подсвечиваемую строку (ему советовали переопределить цвет фона через CSS), кто-то аналогичным образом жаловался на огромные затраты процессорного времени. Я решил проверить так ли это:

Издержки процессорного времени на подсветку строк грида при наведении

Издержки процессорного времени на подсветку строк при наведении

Опасения подтвердились — метод getPageXY серьезно грузит процессор и сама работа с документом становится крайне неприятной.

Еще раз пролистав сенчу на предмет чего-то похожего на нужный мне параметр, я ничего не нашел, а гугл выдал мне вот такую опцию конфига компонента Grid:

trackMouseOver: false

Позже я выяснил, что этот параметр был удален еще в версии ExtJS 4.0, в том числе из документации. Работающее решение я искал долго, поэтому публикую эту запись, если кто-то столкнется с похожей проблемой. Оно очень простое:

grid = new Ext.grid.Panel({
     ...
     viewConfig: {
          trackOver:false
     },
     ...

Кстати, когда я сталкиваюсь с подобного рода проблемами в ExtJS, я никогда даже не пытаюсь найти ответы в рунете, а сразу иду в гугл, поэтому придется мне все-таки сделать еще и англоязычную версию блога 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *