Question

I am trying to toggle from a Tab Container view to Title Pane view. I am pulling in all dom objects with a class of “cPane”. Initially I am assigning as dijit.layout.ContentPane, when I hit the toggle button I am trying to re-assign to dijit.TitlePane.

It seems the dom element are not keeping its attributes. I have tried every “destroy” method, but when I assign them to TitlePane they are blank. How can I re-assign dom nodes without losing attributes? Thanks.

Here is my code: http://jsfiddle.net/afarris/gFXnH/11/

dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");

dojo.addOnLoad(function() {

dojo.parser.parse("widget");

var cc = dojo.byId("contentContainer");

dojo.query(".cPane").forEach(function(n){
   new dijit.layout.ContentPane({
        title: dojo.attr(n, "title")
    }, n);
});

var dtc = new dijit.layout.TabContainer({
   style: "height:100px; width: 100%;"
}, cc);

dtc.startup();    

var tabMode = true;


new dijit.form.ToggleButton({
    showLabel: true,
    checked: false,
    onChange: function(val) {
        if (tabMode == true) {
            dtc.destroyDescendants(true);
            dojo.query(".cPane").forEach(function(n){
            console.log('found contentPane');
                new dijit.TitlePane({
                    title: dojo.attr(n, "title"), open: "true"
                }, n), cc;
            });            
        }

    },
    label: "toggle"
},
"viewToggle");    

});

<div class="tundra">
<div id="widget">
<button id="viewToggle"></button>
<div id="contentContainer">
    <div class="cPane" title="First" style="width: 100%; height: 100px">test</div>
    <div class="cPane" title="Second" style="width: 100%; height: 100px"><p>demo</p></div>
 </div>
</div>

Answer 1

When you call .destroyDescendants, you’re destroying the tab container, which destroys the content panes, which destroys your original .cPane divs. So they’re not there to put in as TitlePanes.

When you construct your initial ContentPane, you’re making your .cPane nodes into your ContentPanes (not inside your ContentPanes), so they’ll go away when you destroy the tab container.

So, you need to get your content out of your content panes before you destroy them. This’ll probably be less confusing to do if you put your content into your content panes instead of turning your content into content panes. (And the same when you create the TitlePanes.) Then you can just use ‘place’ to move your content from ContentPane to TitlePane (e.g. http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/)

I’m not quite sure what you’re trying to achieve, so it’s a bit tricky to answer.