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

发布于 2024-11-09 05:39:39 字数 268 浏览 0 评论 0 原文

这是一个由两部分组成的问题。首先,在 ExtJS 4 中,我如何将悬停侦听器(又名 mouseenter、mouseout)附加到网格面板的行?

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

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

赤濁 2024-11-16 05:39:39

第 1 部分:

您可以通过跟踪 itemmouseentertrackOver 在网格视图上。

请注意,这一切都适用于网格视图配置,而不是网格配置,并且 trackOver 配置默认处于关闭状态。你要小心,不要在这些事件中做得太多。

第 2 部分:

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

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.

夏至、离别 2024-11-16 05:39:39

我在悬停时显示工具栏按钮的菜单(并在鼠标移出时隐藏它们)时遇到了类似的问题。我编写了一个 HoverButton 扩展,如果需要,您应该能够使用 Simon 解决方案中提到的事件轻松地将其扩展为 HoverRow。

Ext.HoverButton

希望有帮助。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文