Show custom menu on row hover in an ExtJS 4 Grid

Kind of a two-part question. First, in ExtJS 4, how would i go about attaching a hover listener (aka mouseenter, mouseout) to the rows of a grid panel?

Secondly, reason I want that event is so I can show a couple action buttons within one of the cells when any cell in the row is hovered over. What would be the most efficient way implement this menu (creating the 开发者_运维知识库actual html elements). My first thought was to create a renderer for the cell that will hold the menu and return the html for the buttons in that renderer, initially hidden. However that seems like it would be alot of extra html being put into the dom since those same buttons would be created for each row thats displayed in the grid.

Part 1:

You can do this by tracking the itemmouseenter and itemmouseleave events on the grid view. However, for these events to be fired, you need to make sure you enable trackOver on the grid view.

Note that this all applies to the grid view config, not the grid config, and that the trackOver config is off by default for performance reasons. You want to be careful about doing too much in these events.

Part 2:

A better way to do this may be to define an editor for the cell, which is a component containing the buttons you wish to use. You can trigger the editing with the events discussed in part 1. This will mean your buttons get reused in the same way other editors do, and can be Ext components rather that html cludges.

I had a similar issue with showing menus for toolbar buttons on hover (and hiding them on mouseout). I wrote up a HoverButton extension which you should be able to easily extend to be a HoverRow if you need, using the events mentioned in Simon's solution.

Ext.HoverButton

Hope it helps.