Create contextmenu as combination of main menu-items and other menus?

Question

I have a grid with multiple tools-items and each tools-item has its own menu.

var gearMenu = Ext.create('Ext.menu.Menu', {
                items: [{
                    text: 'item 1'
                }, {
                    text: 'item 2'
                }, {
                    text: 'item 3'
                }]
            });

The tools-gear is defined like:

{
    type: 'gear',
    callback: function (owner, toolEl, event) { 
        event.stopEvent();
        gearMenu.show().alignTo(toolEl, 'tr-br');
    }
}

I’m trying to create a grid-contextmenu which combines several main-menu-items ánd the menu from the tools-item like this:

onItemContextMenu: function (gridView, record, item, index, e) {
    e.stopEvent();
    if (!grid.contextMenu) {
        grid.contextMenu = Ext.create('Ext.menu.Menu', {
            width: 200,
            items: [{
                text: 'main-item 1'
            }, {
                text: 'main-item 2'
            },
                gearMenu
            ]
        })
    }
    grid.contextMenu.showAt(e.getXY());
}

The result is unpredictable.

• If I first click the tools-item, the menu is shown as expected, but when I follow the first click by clicking the grid to show the context-menu it only shows the main-items
• If I first click the contextmenu it only shows the main-menus. If I then click the tools-item I do not see any menu at all. If I click the context menu again the tools-menu is displays on top of the main-items...

Any suggestion how I can create the contextmenu as a combination of main menu-items and other menus?

Arno