Creating Tabs Programmatically with Dojo 0.9 [2]

If you had a look of the previous post, you probably saw that it was working. But there was at least an error in there.

<div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
style="float: left; margin-right: 30px; width: 100%;
height: 100%; overflow: hidden">
<div id="tabs"></div>
</div>

I put a div with an id 'tabs'. This is a really bad idea. In fact, even if the tabs are displayed correctly, this is messing up for instance the access by javascript code to those tabs:

for(var i=this.getChildren().length-1; i>=0; i--) {
this.tablist.onCloseButtonClick(this.getChildren()[i]);
}

This code (in my personal tab widget that is an extension of the dojo tab widget - if I will have time I'll post it later), for instance, is not working, as the method getChildren() is returning always and only an element. To get over this problem, instead of declaring a div in the html, I create some divs dynamically, when needed:

var pane1 = new dijit.layout.ContentPane({ id: 'tab1', title: 'Test tab 1' }, dojo.doc.createElement('div'));

and the HTML code will become:

<div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
style="float: left; margin-right: 30px; width: 100%;
height: 100%; overflow: hidden">
</div>