How to add right click menu to selected items in grid?

[KRavEN]

Does anyone have an example, demo, or direction to point me to figure out how to add a right click dialog menu to selected items in the grid similar to the right click dialog on the column headers?

I need to be able to select a bunch of rows in the grid and then right click and have several options to choose from that would then send a post back to my php script server side.

[dfenwick]

Create a menu:


var messageContextMenu = new Ext.menu.Menu({
id: 'messageContextMenu',
items: [
{ text: 'Open', handler: onMessageContextItemClick },
{ text: 'Print', handler: onMessageContextItemClick },
'-',
{ text: 'Reply', handler: onMessageContextItemClick },
{ text: 'Reply All', handler: onMessageContextItemClick },
{ text: 'Forward', handler: onMessageContextItemClick },
{ text: 'Delete', handler: onMessageContextItemClick },
'-',
{ text: 'Spam', handler: onMessageContextItemClick },
{ text: 'Not Spam', handler: onMessageContextItemClick },
'-',
{ text: 'Properties', handler: onMessageContextItemClick }
]
});

After creating your grid, add a listener to it:


mailboxGrid.addListener('rowcontextmenu', onMessageContextMenu);

Create a callback function for the event. I add mine in my init function so they, by default, have the scope of my class:


function onMessageContextMenu(grid, rowIndex, e) {
e.stopEvent();
var coords = e.getXY();
messageContextMenu.showAt([coords[0], coords[1]]);
}

[KRavEN]

Thanks a ton!! I really appreciate the help.

[KRavEN]

Terrific I got that working, I had to remove the handler definition in the menu setup of course since I don't have a handler yet.

Would you mind posting what your onMessageContextItemClick handler looks like? This is the part that would make the post to the server and then reload the grid on sucess right?

[dfenwick]

Terrific I got that working, I had to remove the handler definition in the menu setup of course since I don't have a handler yet.

Would you mind posting what your onMessageContextItemClick handler looks like? This is the part that would make the post to the server and then reload the grid on sucess right?

In my case it actually doesn't do anything to the grid at all. Based on the item that's selected in my grid, I open a new form containing detailed information about the item I clicked on, or enable it to be directly sent to the printer. Eventually I'll post more of that, but it's very trim and not in a state where it makes much sense to anyone other than me right now.

[AlexisG]

Hello

i've got a problem with the use of this method

in firefox i received this message

[Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMEvent.type]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://localhost:8082/JDB_EVALDRH/theme-default/js/ext-all-debug.js :: anonymous :: line 1796" data: no]

in function


stopEvent : function(){
1795 if(this.browserEvent){
1796 if(this.browserEvent.type == 'mousedown'){
1797 Ext.EventManager.stoppedMouseDownEvent.fire(this);
1798 }
1799 E.stopEvent(this.browserEvent);
1800 }

I don't know why, but it seems there is e problem when trying to hide the context menu.

To bypass problem in IE i'had to add a method

messageContextMenu.getEl().setVisible(false);

and make a right order of call in the handler function of rowcontextmenu

so it work in IE and firefox, but firefox still throwing exception

all of my code

[CODE]<script type="text/javascript">
var monRecord;
var messageContextMenu;

Ext.onReady(function() {

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: './compEvolutionsFormation_GridData.action'
}),
reader: new Ext.data.ArrayReader({id:0},
[{name:'Key'},
{name:'exercice',mapping:1},
{name:'status',mapping:2},
{name:'profil',mapping:3}
])});
ds.load();
var head1 = '<s:property value="header1"/>';
var colModel = new Ext.grid.ColumnModel([
{header: head1, width: 200, sortable: true, locked:false, dataIndex: 'exercice'},
{header: "Status", width: 200, sortable: true, locked:false, dataIndex: 'status'},
{header: "R