如何捕获我的 dojo TabContainer 的子/嵌套（子）选项卡的 `id`？答案

【问题标题】：How do I capture the `id` of my child/nested (sub) tabs of my dojo TabContainer?如何捕获我的 dojo TabContainer 的子/嵌套（子）选项卡的 `id`？
【发布时间】：2015-05-01 22:05:14
【问题描述】：

我有一组带有子标签的标签。单击每个选项卡时，我需要获取每个选项卡的id。我首先发现了dojoTabContainer对象内置的watch函数：

myTabContainer.watch("selectedChildWidget", function(name, oval, nval){
    console.log("selected child changed from ", oval, " to ", nval);
});

这适用于父标签，但不适用于子/嵌套子标签。我唯一的线索是子标签是ContentPane 对象而不是TabContainer 对象。

我也试过这个，它也只适用于父标签：

var tcmainid = tcmain.id;
dojo.connect(dijit.byId(tcmainid), "selectChild", function(page){console.log("Page ID: " + page.id)});

这是我的标签创建代码：

var tcmain = new TabContainer({doLayout: false}, 'htmlDDIVid');

var parentTab1 = new ContentPane({title: "Tab1", content: gridx1});
var parentTab2 = new TabContainer({title: "Tab2", doLayout: false, nested: true});

var parentTab2SubTab1 = new ContentPane({title: "SubTab1", content: sub1Gridx});
var parentTab2SubTab2 = new ContentPane({title: "SubTab2", content: sub2Gridx});

parentTab2.addChild(parentTab2SubTab1);
parentTab2.addChild(parentTab2SubTab2);

tcmain.addChild(parentTab1);
tcmain.addChild(parentTab2);

如何为我的子标签/嵌套子标签获取 id？

【问题讨论】：

标签： javascript dojo dijit.layout

【解决方案1】：

我想通了。我尝试了几种不同的方法，但只有这种方法适用于子标签。这是我的解决方案：

使用：

"dijit/registry",
"dojo/on",

在我的道场require 声明中。

myGridxID 是位于我的 HTML 页面的 DIV 中的 TabContainer id，其中绘制了我的 TabContainer，其中包含我的所有选项卡和子选项卡，每个叶选项卡都有一个 gridx。

// Pickup the onClick and get the ID of the tab or sub tab being clicked, this is used in the case switch statement for updating the grid accordingly
    var tabContainerPanel = registry.byId('myGridxID');   //get dijit from its source dom element

    on(tabContainerPanel, "Click", function (event) {
        selectedTabString = tabContainerPanel.selectedChildWidget.title;

        if (typeof tabContainerPanel.selectedChildWidget.selectedChildWidget !== 'undefined'){
            // There are no child tabs, parent tab only
            selectedTabString = tabContainerPanel.selectedChildWidget.selectedChildWidget.title;
        }

然后我遇到的问题是，gridx 中当前选项卡的点击被拾取。我用 if 语句绕过了这个：

if (selectedTabString !== prevSelectedTabString){

检查并查看我当前单击的gridx 是否与我刚刚选择的相同，然后它会忽略点击，或者我应该说在点击选项卡时忽略我拥有的代码。在我的代码中单击选项卡时，我会更新该选项卡 Gridx。

【讨论】：