Create BorderContainer programmatically

Submitted by peetank on Fri, 03/14/2008 - 13:20.

Hi,
I try create BorderContainer programmatically with this way:

document.body.appendChild(node);	// necessary for tab contianer ???
node.style.cssText = "border: 2px solid black; width: 90%; height: 300px; padding: 10px;";
var bc = new dijit.layout.BorderContainer({design: "sidebar"},node);

var node = document.createElement("div");
document.body.appendChild(node);
node.style.cssText = "background-color: #b39b86; height: 100px;";
var widget = new dijit.layout.ContentPane({region: "top", splitter: "true"},node);
bc.addChild(widget);

var node = document.createElement("div");
document.body.appendChild(node);	// necessary for tab contianer ???
node.style.cssText = "background-color: #f5ffbf; padding: 10px;";
var widget = new dijit.layout.ContentPane({id: "cp1", region: "center"},node);
bc.addChild(widget);

var node = document.createElement("div");
document.body.appendChild(node);	// necessary for tab contianer ???
node.style.cssText = "background-color: #b39b86; height: 100px;";
var widget = new dijit.layout.ContentPane({region: "bottom", splitter: "true"},node);
bc.addChild(widget);

bc.startup();

dijit.byId("cp1").setContent("test test test");

and it shoud be same as this


		
			top bar
		
		
		
			center		
		
			bottom bar

but first doesn't work and second(take from borderCotainer tests) work fine

Where is the problem?

Thanks

Login or register to post comments
Subscribe post

Your code works if the

Submitted by lalee on Fri, 03/14/2008 - 19:03.

Your code works if the bc.startup() is called immediately after it's created.

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");

var node = document.createElement("div");
node.style.cssText = "border: 2px solid black; width: 90%; height: 300px; padding: 10px;";
document.body.appendChild(node); // necessary for tab contianer ???

var bc = new dijit.layout.BorderContainer({design: "sidebar"},node);
bc.startup();

var node = document.createElement("div");
node.style.cssText = "background-color: #b39b86; height: 100px;";
document.body.appendChild(node);
var widget = new dijit.layout.ContentPane({region: "top", splitter: "true"},node);
bc.addChild(widget);

var node = document.createElement("div");
node.style.cssText = "background-color: #f5ffbf; padding: 10px;";
document.body.appendChild(node); // necessary for tab contianer ???
var widget = new dijit.layout.ContentPane({id: "cp1", region: "center"},node);
bc.addChild(widget);

var node = document.createElement("div");
node.style.cssText = "background-color: #b39b86; height: 100px;";
document.body.appendChild(node); // necessary for tab contianer ???
var widget = new dijit.layout.ContentPane({region: "bottom", splitter: "true"},node);
bc.addChild(widget);

dijit.byId("cp1").setContent("test test test");

It seems a change of

Submitted by genro on Sun, 03/30/2008 - 17:32.

It seems a change of rules.

In layout documentation I read:

"Startup call: when building widgets programmatically, you create the parent first, then add the children, and grandchildren... and finally call startup(). Startup() is called once on the top element in the hierarchy, after the whole hierarchy has been setup and the element inserted."

So my generic builder calls startup method AFTER children creation. And it doesn't work for BorderContainer if i use panes with splitter.

Bug or change of rules ?

bug

Submitted by peller on Tue, 04/01/2008 - 00:05.

I think it should work either way, as long as you call startup.

Search