ExtJS 4–Events–Context Menu

In this post, we will try to add a context menu for the div. Let see the output first.

When we right-click inside the div, we are showing the context menu. Lets see the code for this. We are using ExtJS menu (Ext.menu.Menu) instance for this. Let see the code for this.

 var myMenu = Ext.create('Ext.menu.Menu', {
            width:100,
            height:100,
            margin:'0 0 10 0',
            items:[
                {
                    text:'Cut'
                },
                {
                    text:'Copy'
                },
                {
                    text:'Paste'
                }
            ]
        });
        var init = function () {
            var listDivEl = Ext.get('list');
            listDivEl.on('contextmenu', function (eventObject, target) {
                eventObject.preventDefault();
                myMenu.showAt(eventObject.getXY());
            });
        };

        Ext.onReady(init);

Every event handler is supplied with event object which contains x,y location of mouse and other information. The code above is straight-forward. We are suppressing the default context menu and showing our menu in its place.

The demo can be found here