Extjs 3 rowcontext destroy - extjs

Question

I created two tab panels and each panel has a grid.
Listener for Grid A:
Ext.getCmp('AGrid').addListener("rowcontextmenu", function menus(grid, rowIndex, e) {
if (!grid.contextMenu) {
grid.contextMenu = new Ext.menu.Menu({
autoDestroy: false,
items: [{ id: 'view', text: 'View Content'}],
currentRowIndex: rowIndex,
listeners: {
itemclick: function (item) {
switch (item.id) {
case 'view':
viewEmailClick(grid.getStore().getAt(this.currentRowIndex).data);
break;
}
}
}
});
}
this.contextMenu.currentRowIndex = rowIndex;
e.stopEvent(); // this stops the browser context menu and allows the default grid
// show the row context menu here
this.contextMenu.showAt(e.xy);
});
Listener for Grid B:
Ext.getCmp('BGrid').addListener("rowcontextmenu", function menus(grid, rowIndex, e) {
if (!grid.contextMenu) {
grid.contextMenu = new Ext.menu.Menu({
autoDestroy: false,
items: [{ id: 'view', text: 'View Task'}],
currentRowIndex: rowIndex,
listeners: {
itemclick: function (item) {
switch (item.id) {
case 'view':
viewTicketClick(grid.getStore().getAt(this.currentRowIndex).data);
break;
}
}
}
});
}
this.contextMenu.currentRowIndex = rowIndex;
e.stopEvent(); // this stops the browser context menu and allows the default grid
// show the row context menu here
this.contextMenu.showAt(e.xy);
});
When I right click on it Grid A works fine, and then right click on Grid B rowcontext menu is not working (just shows small gray dot).
After I turn back to Grid A and right click, it shows two rowcontext menus on Grid A:
If I right click on B grid and A grid right click (nothing shows) after turn back to B grid
it show rowcontext menu which contains two lists (reverse order) on Grid B.
Why this kind of things happen?
How can I show properly each grid row context menu?

Answer 1

It seems you pass the same grid variable to both listeners.

Answer 2

This problem is caused by parameter grid or grid.contextmenu obviously.
I found the answer.
The problem is caused by the follwing line.
items: [{ id: 'view', text: 'View Task'}]
I used same context menu id 'view'.
After those name changed like the followings
items: [{ id: 'viewTask', text: 'View Task'}]
items: [{ id: 'viewContent', text: 'View Content'}]
it works perfect.