TabContainer and Subscribe for initial tab...

Submitted by johnbhansen on Sat, 11/29/2008 - 14:48.

Dijit Support

Hi Everyone,

I'm building a simple TabContainer with ContentPanes (programatically).
I use publish/subscribe to get content for the Tab panes. This works great,
except for the initial tab (which comes up without content). I thought I'd have to
explicitly select the initial tab to get the subscribe event to fire but that
didn't work and I don't understand why? I used a forward() and back() functions
to force the subscribe event and that worked but seems awkward.

dojo.addOnLoad(function() {
var cmds = ["ALL", "NOW","TODAY",
"YEAR","TOTAL","ENERGY",
"POWER","AC_VOLTAGE","DC_VOLTAGE",
"YIELD","OPERATING_HRS"];
buildContentPanes(cmds);

var contnode = dijit.byId('myTabContainer');
dojo.subscribe("myTabContainer-selectChild",contnode,function () {
console.log("selected tab " + contnode.selectedChildWidget.id);
getxml(contnode.selectedChildWidget.id);
});
// Now explicitly select the first tab so it goes out and
// gets the published XHR/XML information.
// Normally, I'd just do the following BUT IT DOESN'T WORK
// contnode.selectChild(dijit.byId("ALL"));
// The following DOM node selection also didn't work:
// var fnode = dojo.byId("ALL");
// contnode.selectChild(dijit.byNode(fnode));
// The following worked:
contnode.forward();
contnode.back();
});

Here is the code I used to build the content panes:

// Function to build content panes
function buildContentPanes(cmds) {
for each (var cmd in cmds) {
var newChild = new dijit.layout.ContentPane({
title:cmd,
refreshOnShow:true
}, dojo.doc.createElement('div'));

// Add a class for the tab so we can style it
dojo.addClass(newChild,"tab");
// Set an ID on the contentPane
// Normally I would use dojo.attr but it didn't work or
// gave deprecation messages. 1.2 release notes mention
// using widget.attr() instead and it seems to work but
// couldn't find that in the DojoToolKit API?
newChild.attr("id",cmd);

// find my tabContainer and add our new ContentPane
dijit.byId('myTabContainer').addChild(newChild);
newChild.startup();

// Now make the body visible as we are done drawing tabs
dojo.style(dojo.body(),"visibility","visible");
}

}

Here is the HTML:

Any help appreciated.

Login or register to post comments
Unsubscribe post

Couple of things to try

Submitted by dante on Sat, 11/29/2008 - 16:05.

Couple of things to try here:

add the id while instantiating, store a ref to the tabContainer, and you don't need to createElement a div. Also, placeAt is new in 1.2, and can addChild() to the tabContainer for you very conveniently:

var tabContainer = dijit.byId("myTabContainer");
for(var cmd in cmds){
var newchild = new dijit.layout.ContentPane({
title: cmd, id: cmd, refreshOnShow:true
}).placeAt(tabContainer);
}

or, create the TabContainer entirely programatically, too:

var tabContainer = new dijit.layout.TabContainer({
style:"width:750px; height:10px; margin:5px border:1px solid"
}).placeAt(dojo.body());

// add each cmd in cmds

tabContainer.startup();

// adding a class to just newchild or tabContainer won't work, you have to add it to a DOM Node:
dojo.addClass(tabContainer.domNode, "tab");
// but it exists already in your markup, so if you stick with that you can omit this step.

You shouldn't _have_ to call .startup() on each newChild. The TabContainer _should_ be doing that if it has already been started (which for performance reasons allows you to addChild() many times, then call .startup() ).

the .selectChild() call you have commented out should work when you register the id's in the instantiation ... not sure why newChild.attr("id", cmd) isn't doing what you expect (it should) ... if you can reduce it to a very simple programatic example showing it fail, I would suggest you open a bug report on it.

Hope this helps.

Regards,
Peter Higgins

great...thanks..

Submitted by johnbhansen on Sat, 11/29/2008 - 17:47.

Thanks for the quick response. I'll try those and reply back...jh

Search