Extjs 3 rowcontext destroy

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

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.

Answer 2

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