20

I can create context menu for tree and attach to 'contextmenu' event. Code:

contextMenu = new Ext.menu.Menu({
  items: [{
    text: 'Edit',
    iconCls: 'edit',
    handler: edit
  },...]
})

Ext.getCmp('tree-panel').on('contextmenu', function(node) {
  contextMenu.show(node.ui.getAnchor());
})

But how I can create context menu for grid elements?

Lorenz Meyer
  • 19,166
  • 22
  • 75
  • 121
edtsech
  • 1,167
  • 2
  • 11
  • 17

5 Answers5

26

First define your context menu

mnuContext = new Ext.menu.Menu({
    items: [{
        id: 'do-something',
        text: 'Do something'
    }],
    listeners: {
        itemclick: function(item) {
            switch (item.id) {
                case 'do-something':
                    break;
            }
        }
    }
});

Then create a listener for the desired event. It is very important to remember to stop the event's default behaviour so you can replace it with your own. If you don't call the event.stopEvent() method to stop the event bubbling onwards then the brower's default context menu will appear regardless of what you do.

rowcontextmenu: function(grid, index, event){
     event.stopEvent();
     mnuContext.showAt(event.xy);
}
Alan McCune
  • 284
  • 3
  • 2
  • 1
    For ExtJS 6, `event.xy` should be changed to `event.getXY()` otherwise it'll show up in the top left corner. – harryBundles Jan 29 '16 at 12:34
  • This does not give you access to the item in the grid being clicked on (the context) inside the menu handler function. So this isn't really a context menu, it's just a menu that happens to be positioned on the grid. – Joel Mueller Jun 12 '18 at 21:49
7

Well, depending on what you want to do you can handle the following GridPanel events in the same manner as your example: contextmenu, cellcontextmenu, containercontextmenu, groupcontextmenu, headercontextmenu, rowbodycontextmenu or rowcontextmenu.

Brian Moeskau
  • 20,103
  • 8
  • 71
  • 73
  • 1
    No information on defining context menu. Other answer much better for my needs, and I believe anybody else's. – Dexygen Sep 25 '11 at 16:45
  • 1
    @George: The OP had already defined his context menu in the original question, and so did not need help with that. It's a bit lame to vote me down 14 months after I answered the question just because you like a more recent answer better. Nothing about my answer is invalid or improper in any way. In fact, my answer provides the specific list of events offered by the grid to handle, which your preferred answer does not. To each his own, but typically down votes are used to indicate incorrect answers, not just your personal preference. Thanks. – Brian Moeskau Sep 26 '11 at 04:42
  • 2
    @Brian Your answer is incomplete in that it does not mention event.stopEvent. Since yours was the accepted answer but in my opinion incomplete for my needs, and others who like me might find this via Google, I thought it was important to make the answer below yours stand out, with a rating of 6 to 3, instead of 5 to 4. I'm sorry that losing merely 2 points of rep makes you feel it necessary to lash out at me personally, I spent a point of my own rep to continue making SO a better resource – Dexygen Sep 26 '11 at 17:47
4

For extjs4, add this in your grid:

listeners: {
  itemclick: function(view, record, item, index, e, options){
    menuContext.showAt(e.xy);
  }
}

With the same menu context as Alan provided above.

jaycode
  • 2,926
  • 5
  • 35
  • 71
3

have to add this property in your grid for example : 

viewConfig: {
            stripeRows: true,
            listeners: {
                itemcontextmenu: function(view, rec, node, index, e) {
                    e.stopEvent();
                    contextMenu.showAt(e.getXY());
                    return false;
                }
            }
        },
Rubén Fanjul Estrada
  • 1,296
  • 19
  • 31
0
  1. Create a controller file

  2. Create a View file

        init : function() {
        this.control(

                   'countrylist' : {

                        itemcontextmenu : this.contextMenuBox

                    }
                });
        },

        contextMenuBox:function( view, record, item, index,  e, eOpts ){


if(record.data.status=='Y'){

var menu = Ext.create('Ext.menu.Menu',{
            items: [{
                        text: 'Do something'
                    }]
                    });
                    e.stopEvent();
                    menu.showAt(e.getXY());


        }
        else{
            var menu = Ext.create('Ext.menu.Menu',{
            items: [{
                        text: 'Don\'t'
                    }]
                    });
                    e.stopEvent();
                    menu.showAt(e.getXY());


        }

        },
aswininayak
  • 933
  • 5
  • 22
  • 39