NO luck with that... this is what I' doing ...
var step1Tab, step2Tab, step3Tab, tabs;
step1Tab = {
title: "Step 1",
content: this.step1Node
};
step2Tab = {
title: "Step 2",
disabled : true,
content: this.step2Node
};
step3Tab = {
title: "Step 3",
disabled: true,
content: this.step3Node
};
tabs = [step1Tab, step2Tab, step3Tab];
this.tabCT = new TabContainer({
tabs: tabs
}, this.tabDiv);
this.tabCT.startup();
HTML
<div class="esriCTTabDiv" data-dojo-attach-point="tabDiv" data-dojo-type="dijit/layout/TabContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-attach-point="step1" class="esriCTTabNode" id="step1"></div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-attach-point="step2" class="esriCTFullHeight esriCTTabNode" id="step2"></div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-attach-point="step3" class="esriCTFullHeight esriCTTabNode" id="step3" ></div>
</div>
So far so good. This works great. I get three tabs that are div's that I can populate with content... text, button, whatever...
![](https://community.esri.com/legacyfs/online/511117_pastedImage_2.png)
But how do I make Step 2 and Step 3 "unselectable", and how do activate them via some event handler when some condition is met after some Step 1 action has taken place?
My suspicion is that I'm getting the programmatic and declarative wires crossed because I'm having issues getting references using registry.byId().