ExtJS4: Add Custom Right Click Menu in MVC

The way to create a custom menu in mouse right click event function in ExtJS 4 is little different with pre-version. It seems in Ext 4.0.2 they changed event name and arguments order.

First, let’s see how we create the menu in Ext 3. I get this example from aditia rahman:

var menu1 = new Ext.menu.Menu({
    items: [
        {
            text: 'I like Ext',
            checked: true
        }, '-', {
            text: 'Open With',
            menu: {
                items: [{
                    text: 'Notepad ++'
                }, {
                    text: 'GIMP 2.0'
                }, {
                    text: 'Firefox'
                }]
            }
        }, '-', {
            text: 'Cut'
        }, {
            text: 'Copy'
        }, {
            text: 'Delete'
        }, '-', {
            text: 'Rename'
        }
    ]
});

Let’s write a DataView to add a listener.

var datav = new Ext.DataView({
    autoScroll: true, store: store, tpl: tpl,
    autoHeight: false, height: 250, multiSelect: true,
    overClass: 'x-view-over', itemSelector: 'div.thumb-wrap',
    emptyText: 'No images to display',
    style: 'border:1px solid #99BBE8;',
    listeners: {
        render: {
            fn: function() {
                 Ext.getBody().on("contextmenu", Ext.emptyFn,
                    null, {preventDefault: true});
            }
        },
        contextmenu: {
            fn: function(obj, index, node, event) {
                x = event.browserEvent.clientX;
                y = event.browserEvent.clientY;
                menu1.showAt([x, y]);
            }
        }
    }
});

When the data view is rendered it disabling the default right click web browser menu, this is called in listeners “render” event and “contexmenu” event is for detecting right click mouse event, capture the mouse cursor position and displaying the menu.

It’s easy right? Now let’s make a right click menu in extjs 4 MVC.

1. add menu into Folder view ‘app/view/MenuRight.js’

Ext.define('PG.view.MenuRight', { 	
        extend: 'Ext.menu.Menu',
						
	items: [
		{
			text: 'I like Ext',
			checked: true
		}, '-', {
			text: 'Open With',
			menu: {
				items: [{
					text: 'Notepad ++'
				}, {
					text: 'GIMP 2.0'
				}, {
					text: 'Firefox'
				}]
			}
		}, '-', {
			text: 'Cut'
		}, {
			text: 'Copy'
		}, {
			text: 'Delete'
		}, '-', {
			text: 'Rename'
		}
	] 
});

2. add listener into controller file

init: function() {
	this.control({
		'alias_name_here' : {
			render: function() {
				 Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
			}, 
			itemcontextmenu : function( grid, record, item, index, event){ 
				x = event.browserEvent.clientX;
				y = event.browserEvent.clientY; 
				var menu = new PG.view.MenuRight();
				menu.showAt([x, y]);
				
				/*
				// if you want create a menu  in here instead of add 
                                //menu in the view folder, you can use following code
                                event.stopEvent(); 
				var menu = Ext.create('Ext.menu.Menu',{
					items: [{
						text: 'Show name',
						handler: function() {
							alert(record.get('name'));
						}
					}, {
						text: 'Show ID',
						handler: function() {
							alert(record.get('user_id'));
						}
					}]
				});
				menu.showAt(event.xy);
				*/

			}
		},
	});

affiliate_link
Share this Post:
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

Comments are closed.