PDA

View Full Version : Using contextmenu and rowcontextmenu together



hallikpapa
16 Sep 2009, 10:56 PM
I have the two listeners in my RowSelectionModel


contextmenu: function(e){
e.preventDefault();
this.onContextMenu
},
rowcontextmenu: function(grid,row,e){
e.preventDefault();
this.onContextMenu
}

But when I select the 'Audit Trail' menu item, the e is undefined and row does not contain the row information. I obviously have something backwards, but cannot see it. Please point me in the right direction


onContextMenu : function(e) {
e.preventDefault();
if (!this.contextMenu) {
this.contextMenu = new Ext.menu.Menu({
id: 'gridCtxMenu',
items: [{
//text: 'Email', menu: emailSubMenu
text: 'Messaging', menu: msgSubMenu
}, {
text: 'Audit Trail',
handler:function(grid,row,e){
var grid = Ext.getCmp('audit-trail-grid');
grid.getStore().load({
params: { user_id: row.id }
});
}

}]
});

edit: I am assuming because I tried to stick the rowcontextmenu within the onContextMenu, but I wasn't sure how to set this up properly. When I put it inside of onRowContextMenu, the Audit Trail wasn't showing at all. Just the first context menu

Condor
16 Sep 2009, 11:12 PM
I assume you meant something like:

containercontextmenu: function(grid, e){
// containercontextmenu was added in Ext 3.0.1
this.onContextMenu(grid, false, e);
},
rowcontextmenu: function(grid, row, e){
this.onContextMenu(grid, row, e);
}
...
onContextMenu: function(grid, row, e){
e.preventDefault();
var menu = grid.contextMenu;
if(!menu){
menu = grid.contextMenu = new Ext.menu.Menu({
id: 'gridCtxMenu',
items: [{
text: 'Messaging',
menu: msgSubMenu
}, {
itemId: 'AuditTrail',
text: 'Audit Trail',
handler: function(item, e){
// get record id that was previously stored in menu
var id = item.parentMenu.recid;
Ext.getCmp('audit-trail-grid').getStore().load({
params: {
user_id: id
}
});
}
}]
});
}
// disable if not clicked on a row (from containercontextmenu)
menu.getComponent('AuditTrail').setDisabled(row === false);
// store current record id in the menu (so the menu items can find it)
menu.recid = row !== false ? grid.getStore().getAt(row).id : null;
menu.showAt(e.getXY());
}

hallikpapa
16 Sep 2009, 11:32 PM
Ah, didn't know about containercontextmenu.

Unfortunately I get a

e.preventDefault() is not a function now and it shows the browsers right click menu instead. I will look for the new way to suppress the browser menu, but if you're still around, am I missing anything in my msgSubMenu, or the proper way to suppress browser right click?

I also changed my msgSubMenu handler to include grid,e now like:


var msgSubMenu = new Ext.menu.Menu({
items: [{
text: 'All Users'
},{
text: 'Selected Users',
handler:function(grid,e) {
var o = {};
var grid = Ext.getCmp('user-grid');
grid.getStore().each(function(rec){
o[rec.id] = rec.get('u_userName');
});

Also please look at the attached screen shot. I did a breakpoint in onContextMenu setup like you have it above. and when it enters that function, grid,row,e all seem to be incorrect.

Here is my current setup


onContextMenu: function(grid, row, e){
var menu = grid.contextMenu;
// e.preventDefault();
var menu = grid.contextMenu;
if(!menu){
menu = grid.contextMenu = new Ext.menu.Menu({
id: 'gridCtxMenu',
items: [{
text: 'Messaging',
menu: msgSubMenu
}, {
itemId: 'AuditTrail',
text: 'Audit Trail',
handler: function(item, e){
// get record id that was previously stored in menu
var id = item.parentMenu.recid;
Ext.getCmp('audit-trail-grid').getStore().load({
params: {
user_id: id
}
});
}
}]
});
}
// disable if not clicked on a row (from containercontextmenu)
menu.getComponent('AuditTrail').setDisabled(row === false);
// store current record id in the menu (so the menu items can find it)
menu.recid = row !== false ? grid.getStore().getAt(row).id : null;
menu.showAt(e.getXY());
AdPortalAdmin.UserGrid.superclass.onContextMenu.apply(this, arguments);
},

Condor
16 Sep 2009, 11:54 PM
1. You didn't post how you are calling onContextMenu.
2. The menu item handler has parameters item and e (and not 'grid').

hallikpapa
17 Sep 2009, 12:07 AM
1. You didn't post how you are calling onContextMenu.
2. The menu item handler has parameters item and e (and not 'grid').

Sorry, here is my RowSelectionModel


selModel : new Ext.ux.grid.livegrid.RowSelectionModel({
listeners: {
...
...
...
containercontextmenu: function(grid, e){
// containercontextmenu was added in Ext 3.0.1
this.onContextMenu(grid, false, e);
},
rowcontextmenu: function(grid, row, e){
this.onContextMenu(grid, row, e);
}
}
}),

Condor
17 Sep 2009, 12:10 AM
rowcontextmenu and containercontextmenu are not RowSelectionModel events. They are GridPanel events!

But I see you are using LiveGrid. That user extension might have completely different events and parameters.

hallikpapa
17 Sep 2009, 12:14 AM
It's also giving me a grid.getStore is not a function here:
menu.recid = row !== false ? grid.getStore().getAt(row).id : null;

I also tried
Ext.getCmp('audit-trail-grid').getStore().getAt(row) but it says it's undefined.

But I think I am almost there.

So it's failing before it shows the menu, but I don't understand why this stopped working:
e.preventDefault();

hallikpapa
17 Sep 2009, 12:15 AM
rowcontextmenu and containercontextmenu are not RowSelectionModel events. They are GridPanel events!

But I see you are using LiveGrid. That user extension might have completely different events and parameters.

Ohhh. My mistake. I will move where those listeners are placed. Thank you for taking the time to point this out to me. I will keep trying.

hallikpapa
17 Sep 2009, 12:32 AM
I will also add I searched the livegrid.js, and I see no modifications to the contextmenu or any menu item for that matter. But somewhere the data being sent to my handlers are all messed up.

<edit> crap. I am using the public release 3.0.0

I don't have containercontextmenu. That may be my problem.

hallikpapa
17 Sep 2009, 12:53 AM
OK maybe this isn't the best way, but I used a contextmenu in the RowSelectionModel, and in the handler I got the row id like:

var rowid = Ext.getCmp('user-grid').getSelectionModel().getSelected().id;

This should work for my purposes since I don't have the most current version. Thanks!