Показывать пользовательское меню при наведении строки в сетке ExtJS 4

Question

Вид вопроса из двух частей. Во-первых, в ExtJS 4, как мне присоединить слушатель при наведении курсора (он же mouseenter, mouseout) к строкам панели сетки?

Во-вторых, причина, по которой я хочу, чтобы это событие состояло в том, чтобы я мог показать пару кнопок действия в одной из ячеек, когда любая ячейка в строке наведена на. Что было бы наиболее эффективным способом реализовать это меню (создание реальных HTML-элементов). Моей первой мыслью было создать средство визуализации для ячейки, которая будет содержать меню, и вернуть HTML-код для кнопок этого средства визуализации, которые изначально были скрыты. Однако, похоже, что в дом будет добавлено много лишних html, так как те же самые кнопки будут создаваться для каждой строки, отображаемой в сетке.

Answer 1

Часть 1:

Вы можете сделать это, отслеживая события itemmouseenter и itemmouseleave в виде сетки. Однако для запуска этих событий необходимо убедиться, что вы включили trackOver в виде сетки.

Обратите внимание, что все это относится к конфигурации вида сетки, а не к конфигурации сетки, и что конфигурация trackOver по умолчанию отключена по соображениям производительности. Вы хотите быть осторожными, делая слишком много в этих событиях.

Часть 2:

Лучшим способом сделать это может быть определение редактора для ячейки, представляющего собой компонент, содержащий кнопки, которые вы хотите использовать. Вы можете инициировать редактирование с помощью событий, обсуждавшихся в части 1. Это будет означать, что ваши кнопки будут использоваться повторно так же, как это делают другие редакторы, и могут быть компонентами Ext, а не html-облоками.

Answer 2

У меня была похожая проблема с отображением меню кнопок панели инструментов при наведении курсора (и скрытием их при наведении мыши).Я написал расширение HoverButton, которое вы можете при необходимости легко расширить, чтобы оно стало HoverRow, используя события, упомянутые в решении Саймона.

Ext.HoverButton

Надеюсь, это поможет.