如何在网格中显示菜单 - ExtJS 5？

Posted 2023-02-26

【中文标题】如何在网格中显示菜单 - ExtJS 5？

【英文标题】：How to show a menu in a grid - ExtJS 5?

【发布时间】：2015-01-14 14:15:41

【问题描述】：

我正在尝试在网格面板中显示菜单。我有一个用于显示图标的操作列，我想应用效果...当鼠标悬停在该图标上时，将显示一个菜单。

如何在 extjs 5 中做到这一点？

我的操作栏是这样的：

    xtype: 'actioncolumn',
    width: 70,
    items: [
    icon: 'resources/images/icons/cog_edit.png', // Use a URL in the icon config
            tooltip: 'Edit',
            handler: function(grid, rowIndex, colIndex, a, b, c) 

            
    ]

【问题讨论】：

查看 Farish 对此post的回答

【参考方案1】：

参考我在 cmets 中提到的 post，您的解决方案可能如下所示：

var menu_grid = new Ext.menu.Menu(
   items: [
        text: 'Add', handler: function() console.log("Add"); ,
        text: 'Delete', handler: function() console.log("Delete"); 
   ]
);

...

    xtype: 'actioncolumn',
    width: 70,
    items: [
       icon: 'resources/images/icons/cog_edit.png', // Use a URL in the icon config
       tooltip: 'Edit',
       handler: function(grid, rowIndex, colIndex, item, e, record) 
           var position = e.getXY();
           e.stopEvent();
           menu_grid.showAt(position);
       
    ]

编辑：小心创建这样的项目，当它们被隐藏时，它们不会被完全删除并可能导致内存泄漏，请参阅post 以获取更多信息和可能的解决方法/解决方案。

【讨论】：

这有效，但不适用于 mouseover 事件。你知道用鼠标悬停事件显示菜单吗？

我不建议在鼠标悬停时执行此操作，因为您需要实现 mouse out 以在之后将其删除，当您尝试使用菜单时也会触发