ExtJS: Custom Right Click Menu in Dataview

October 5th, 2010 by aditia rahman / 10 Comments  

     

Sometimes we need to add a custom menu in mouse right click event function, and this is possible in ExtJS, why would I create this, just my though to create file explorer like using ExtJS, and what I think to list all the file that available is in Dataview, maybe this useful in the future, actually this is very simple here the part of the code.

First we create the menu that we want

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

You can freely create any custom menu cause in this post there are no function handler in each menu, And the dataview, this is the part in my previous post about creating image gallery using dataview

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, I get it from this blog post, 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. Here the screenshot, source code and the online demo.

Extjs Custom Rightclick menu in Dataview

Download Source | View Demo

        submit to reddit Delicious

10 Comments Leave a Comment Subscribe RSS

Leave a Comment