Closable tab is overriding my context menu

Dojo 1.x users
1

Hi, I’m brand new to Dojo – just started today.

I’m trying to add a context menu to each tab in a TabContainer. This seems easy enough to do (see my example below). The problem is that if I mark a tab as closable then this seems to auto-generate a context menu that overrides mine.

Thus, in the example below, if you right-click on the “Group One” tab, my context menu comes up. Great.
However, if you right-click on the “Group Two” tab then instead what you get is a context menu with exactly one option: “Close”.

How can I either:
1. Replace the auto-generated “Close” menu with the one I want, or
2. Add the MemuItems I want to the auto-generated Menu?

Or is there some other solution? Thanks.

EDIT: Here’s a fiddle: https://jsfiddle.net/j96w02hu/

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Tab Context Menu Issues</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
            padding: 0;
        }

        #appLayout {
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen">
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async: 1"></script>
    <script>
    require(["dijit/registry",
            "dijit/layout/TabContainer", "dijit/layout/ContentPane",
            "dijit/Menu", "dijit/MenuItem",
            "dojo/domReady!"],
            function(registry, TabContainer, ContentPane, Menu, MenuItem){

                // create the TabContainer and attach it to our appLayout div
                var appLayout = new TabContainer({
                    id: "contentTabs",
                    tabPosition: "top",
                    "class": "centerPanel"
                }, "appLayout");

                // Add tabs

                appLayout.addChild(
                    new ContentPane({
                        title: "Group One",
                        content: "<h4>Group 1 Content</h4>"
                    })
                );

                appLayout.addChild(
                    new ContentPane({
                        title: "Group Two",
                        content: "<h4>Group 2 Content</h4>",
                        closable: true
                    })
                );

                // start up and do layout
                appLayout.startup();

                // Add context menus.
                var pMenu;
                pMenu = new Menu({
                    targetNodeIds: ["contentTabs"],
                    selector: ".dijitTab"
                });
                pMenu.addChild(new MenuItem({
                    label: "Simple menu item"
                }));
                pMenu.addChild(new MenuItem({
                    label: "Disabled menu item",
                    disabled: true
                }));
                pMenu.startup();

            }
    );
    </script>
</head>
<body class="claro">
<div id="appLayout" class="demoLayout"></div>
</body>
</html>

(Note: you may have to right-click twice in order to get the context menu to come up. But, one problem at a time…)

2

Okay, I figured out a way to get ahold of the Menu that’s being auto-generated by the TabController.

The code that generates the menu can be found right at the end of dijit/layout/TabController.js.uncompressed.js in the postCreate method (in vers. 1.14.2 anyway).

There you can see that to get the id of the Menu it just tacks _Menu onto the end of the id of the TabController. The latter’s id in turn is formed by tacking _tablist onto the end of the TabContainer's id.

Therefore the Menu can be accessed with

registry.byId(yourTabContainer.id+"_tablist_Menu")

and from there you can add your own MenuItems or modify the given Menu in whatever way you wish.