Gridpanel: Contextmenu / right-click menu

[TheBigOnion]

Hello,
I have a form with two panes. The left pane has a tree on it. I put a context menu on the tree and it works great. On the left pane I have a grid. I have tried to put a context menu on the grid, but it never shows up with the user right clicks. Below is my code. Could someone please help me? Can you point out my error? Or point me in the direction of a working example?

Ext.my.grid.grid_control = new Ext.grid.GridPanel({
    anchor: '0 100%',
    border: false,
    enableDrag: true,
    ddGroup : 'nodeMove',
    view: new Ext.grid.GroupingView({
        emptyText: 'This is empty.',
        forceFit: true,
        showGroupName: false,
        enableNoGroups: true
    }),
    ds: Ext.my.grid.ds,
    cm: Ext.my.grid.cm,
    listeners: {
        'rowClick': function () {
            do_buttons();
        },
        'cellcontextmenu': function(e) {
            node.select();
            Ext.my.grid.context_menu.node = node;
            Ext.my.grid.context_menu.show(e.getTarget());
        }
    }
});

Ext.my.grid.context_menu = new Ext.menu.Menu({
    id: 'context_menu',
    items: [{
        text: 'New File',
        iconCls: 'new_directory_button',
        handler: do_new_directory
    },{
        text: 'Rename File',
        iconCls: 'rename_directory_button',
        handler: do_rename_directory
    }]
});

[westy]

Try itemcontextmenu, and make sure you preventDefault else the browser will grab it:

    listeners: {
        /**
         * Prevents the browser handling the right-click on the control.
         */
        containercontextmenu: function(view, e) {
            // Stop the browser getting the event
            e.preventDefault();
        },

        /**
         * Prevents the browser handling the right-click on the control.
         */
        contextmenu: function(e, element, options) {
            // Stop the browser getting the event
            e.preventDefault();
        },

        /**
         * Prevents the browser handling the right-click on the control.
         */
        itemcontextmenu: function(view, record, item, index, e) {
            // Stop the browser getting the event
            e.preventDefault();
        }
    }, 

[TheBigOnion]

I took out what I had, and put that in, now nothing shows up when I right click. Not the default, and not mine. What did I do wrong?

Thanks....Michael

Try itemcontextmenu, and make sure you preventDefault else the browser will grab it:

    listeners: {
        /**
         * Prevents the browser handling the right-click on the control.
         */
        containercontextmenu: function(view, e) {
            // Stop the browser getting the event
            e.preventDefault();
        },

        /**
         * Prevents the browser handling the right-click on the control.
         */
        contextmenu: function(e, element, options) {
            // Stop the browser getting the event
            e.preventDefault();
        },

        /**
         * Prevents the browser handling the right-click on the control.
         */
        itemcontextmenu: function(view, record, item, index, e) {
            // Stop the browser getting the event
            e.preventDefault();
        }
    }, 

[aconran]

The problem is that you aren't positioning the menu before showing it.

You should use the following code instead:

   Ext.my.grid.context_menu.showAt(e.getXY());

[TheBigOnion]

Hi, I'm not sure where I was suppose to put that, but it did not work. Could you take my code I posted and put it together with something that works?

Thanks so much.

The problem is that you aren't positioning the menu before showing it.

You should use the following code instead:

   Ext.my.grid.context_menu.showAt(e.getXY());

[aconran]

Take a look at:
http://dev.sencha.com/deploy/ext-4.0...tion-grid.html

We subscribe to itemcontextmenu and then use the event's XY coordinates to position the context menu.

[TheBigOnion]

Ok, I changed my code to match the example but it still does not work. Here is my code:

Ext.my.grid.context_menu = new Ext.menu.Menu({
    id: 'context_menu',
    items: [{
        text: 'New File',
        iconCls: 'new_directory_button',
        handler: do_new_directory
    },{
        text: 'Rename File',
        iconCls: 'rename_directory_button',
        handler: do_rename_directory
    }]
});

Ext.my.grid.grid_control = new Ext.grid.GridPanel({
    anchor: '0 100%',
    border: false,
    enableDrag: true,
    ddGroup : 'nodeMove',
    view: new Ext.grid.GroupingView({
        emptyText: 'This is empty.',
        forceFit: true,
        showGroupName: false,
        enableNoGroups: true
    }),
    ds: Ext.my.grid.ds,
    cm: Ext.my.grid.cm,
    listeners: {
        'rowClick': function () {
            do_buttons();
        },
        'itemcontextmenu': function(e) {
            e.stopEvent();
            Ext.my.grid.context_menu.showAt(e.getXY());
            return false;
        }
    }
});

[TheBigOnion]

Anyone?

[westy]

How does it not work exactly? That's not really much info to go on is it...

I'd guess that it errors with stopEvent or getXY is not a function, since it looks like your interface for itemcontextmenu is wrong.

When in doubt I find it best to put a breakpoint in, or a log statement and look at the arguments; you're certainly going to have to get into the habit of doing that if you want to develop in Ext!

In case you do not know every javascript function call sets an arguments variable that you can look at to see what was passed to the function (regardless of what parameters you have 'defined' on your version).

Here's the interface for itemcontextmenu, again:

itemcontextmenu: function(view, record, item, index, e)

[TheBigOnion]

Yes, sorry I had changed my interfaced to look like the one you have there. But it still does not work. When I right click on an item in the grid nothing happens. Not default menu, not custom menu. Just nothing.

How do I put a break point or log point in? And what variable should I be looking at?