在ExtJS 4网格中在行悬停时显示自定义菜单

Show custom menu on row hover in an ExtJS 4 Grid

本文关键字：显示自定义菜单悬停 ExtJS 网格更新时间：2023-09-26

这是一个由两部分组成的问题。首先，在ExtJS4中，如何将悬停侦听器（又名mouseenter、mouseout）附加到网格面板的行？

其次，我想要该事件的原因是，当行中的任何单元格悬停在某个单元格上时，我可以在其中一个单元格中显示几个操作按钮。实现这个菜单最有效的方法是什么（创建实际的html元素）。我的第一个想法是为单元创建一个渲染器，它将保存菜单，并返回该渲染器中按钮的html，最初是隐藏的。然而，这似乎需要在dom中放入大量额外的html，因为网格中显示的每一行都会创建相同的按钮。

第1部分：

您可以通过跟踪网格视图上的itemmouseenter和itemmouseleave事件来实现这一点。但是，要激发这些事件，需要确保在网格视图中启用trackOver。

请注意，这一切都适用于网格视图配置，而不是网格配置，并且出于性能原因，trackOver配置在默认情况下处于关闭状态。你要小心，不要在这些活动中做得太多。

第2部分：

更好的方法可能是为单元格定义一个编辑器，该编辑器是一个包含要使用的按钮的组件。您可以使用第1部分中讨论的事件触发编辑。这意味着您的按钮可以像其他编辑器一样被重用，并且可以是Ext组件，而不是html包含。

我在悬停时显示工具栏按钮的菜单（并在鼠标悬停时隐藏它们）时也遇到了类似的问题。我写了一个HoverButton扩展，如果需要，可以使用Simon解决方案中提到的事件轻松地将其扩展为HoverRow。

外部。悬停按钮

希望能有所帮助。