如何在网格中显示菜单 - ExtJS 5？ [英] How to show a menu in a grid - ExtJS 5?

问题描述

我试图在网格面板中显示菜单。我有一个actioncolumn来显示一个图标，我想应用一个效果...当鼠标移动到该图标上时，会显示一个菜单。

I am trying to show a menu in a grid panel. I have a actioncolumn to display an icon and i want apply an effect... when the mouse is over that icon, a menu will be displayed.

我该怎么办这在extjs 5？

How i can do this in extjs 5?

我的动作栏是这样的：

My actioncolumn is this:

{
    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) {

            }
    }]
}

推荐答案

引用帖子我在评论中提到，您的解决方案可能如下所示：

Referring to this post that I mentioned in the comments, your solution may look something like this:

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 获取更多信息和可能的解决方法/解决方案。

EDIT: Be careful creating items like this, when they are hidden they are not removed completely and can cause memory leaks, refer to this post for further information and possible workarounds/solutions.

这篇关于如何在网格中显示菜单 - ExtJS 5？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！