I have an accordion that has content panes added in a programmatic way. In one of the pane I want to add a tab container which has many tabs. Each tab has many controls that needs to be created dynamically. But creating it dynamic way gives me hard time. I decided to take the different approach to add it using domConstruct.place. I have the design of the code done declarative way and it in separate html pages for each tab. Then I try to add the entire tab container to the existing accordion's content pane as a child.
Only the text content appears on the screen but there is no tab container control in place.
Here is the code:
require(["dgrid/OnDemandGrid", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dijit/layout/TabContainer", "dijit/form/Button", "dgrid/Selection",
"dgrid/Keyboard", "dojo/_base/declare", "dojo/store/JsonRest", "dojo/store/Observable", "dojo/store/Memory", "dijit/registry", "dgrid/extensions/DijitRegistry",
"dgrid/extensions/Pagination", "dgrid/extensions/CompoundColumns", "dgrid/extensions/ColumnResizer", "dojo/dom-construct", "dojo/text!../App/tab.html", "dojo/domReady!"],
function(Grid, ContentPane, AccordionContainer, TabContainer, Button, Selection,
Keyboard, declare, JsonRest, Observable, Memory, registry, DigitRegistry,
Pagination, CompoundColumns, ColumnResizer, domConstruct, tabHtml){
var aContainer = registry.byId('accord');
if (!aContainer) {
console.log('Accordion does not exist');
aContainer = new AccordionContainer({style:"width: auto; height: 680px;"}, "accord");
}
//Grid creation part goes here. Grid appears and events works.
var cpid = "acordcp1_tc_cp1_" + getRandomNumber();
var cp1 = new ContentPane({id: cpid, title: "pane1", content: grid});
aContainer.addChild(cp1);
aContainer.startup();
aContainer.selectChild(cp1);
aContainer.resize();
console.log("TAB HTML", tabHtml);
var tb1 = domConstruct.create("div", {innerHTML: tabHtml}, cpid, "first");
}
//Here is the sample tab container declarative code from dojotoolkit tutorial that I'm trying to get it on accordion's content pane.
<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
Lorem ipsum and all around...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-dojo-props="closable:true">
Lorem ipsum and all around - last...
</div>
</div>
But what I get is:
Lorem ipsum and all around...
Lorem ipsum and all around - second...
Lorem ipsum and all around - last...
yes, only the text appears on the accordion's content pane along with the grid control.
Also the dojo config I have is:
<script type="text/javascript"
djconfig="isDebug: true, parseOnLoad: true" src="dojo/dojo/dojo.js"></script>
What am I doing wrong?
Is this approach not correct? what are the suggestions?
I really appreciate the help. Thanks.
Ram