4

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.

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

            }
    }]
}
And-y
  • 1,519
  • 2
  • 22
  • 33
Vítor Nóbrega
  • 1,219
  • 4
  • 26
  • 53
  • See answer from Farish on this [post](http://www.sencha.com/forum/showthread.php?260803-Creating-right-click-context-menu-on-an-empty-extjs-grid) – Scriptable Jan 14 '15 at 14:21

1 Answers1

4

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);
       }
    }]
}

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.

Scriptable
  • 19,402
  • 5
  • 56
  • 72
  • This works but dont with mouseover event. Do you any idea do display menu with mouseover event ? – Vítor Nóbrega Jan 14 '15 at 16:26
  • I wouldn't recomment to do this on mouse over as you'd need to implement mouse out to remove it afterwards, which would also fire as you try to use the menu – Scriptable Jan 14 '15 at 17:07