I'm trying to write the declarative example in a programmatic way, but so far no success. .html

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

dojo.addOnLoad(function() {

    var borderContainer = new dijit.layout.BorderContainer({
        design: "sidebar",
        gutters: true,
        liveSplitters: true,
        id: "borderContainer"
    });

   borderContainer.placeAt(dojo.body(), "last");

    var panelLeft = new dijit.layout.ContentPane({
        content: "<p>left</p>",
        splitter: true,
        region: "leading",
        style: "width: 300px;"
    });
    panelLeft.placeAt("borderContainer", "first");

    var panelRight = new dijit.layout.ContentPane({
        content: "<p>right</p>",
        splitter: true,
        region: "center"
    });
    panelRight.placeAt("borderContainer", "last");

});

CSS file: #borderContainer { width: 100%; height: 100%; }

You can see the code here:

Thanks!

I'm trying to write the declarative example in a programmatic way, but so far no success. http://dojotoolkit/reference-guide/dijit/layout/BorderContainer.html

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

dojo.addOnLoad(function() {

    var borderContainer = new dijit.layout.BorderContainer({
        design: "sidebar",
        gutters: true,
        liveSplitters: true,
        id: "borderContainer"
    });

   borderContainer.placeAt(dojo.body(), "last");

    var panelLeft = new dijit.layout.ContentPane({
        content: "<p>left</p>",
        splitter: true,
        region: "leading",
        style: "width: 300px;"
    });
    panelLeft.placeAt("borderContainer", "first");

    var panelRight = new dijit.layout.ContentPane({
        content: "<p>right</p>",
        splitter: true,
        region: "center"
    });
    panelRight.placeAt("borderContainer", "last");

});

CSS file: #borderContainer { width: 100%; height: 100%; }

You can see the code here: http://jsbin./inulig/27/edit#source

Thanks!

• javascript
• dojo
• dijit.layout

Share Improve this question Follow edited Jul 20, 2011 at 10:24 Andi T asked Jul 20, 2011 at 10:14 Andi TAndi T 61677 silver badges1313 bronze badges 3

• Ok, so this amuses me but this happens a lot of times. After I ask it somewhere I usually find the answer too. And I did tried to do it on my own, I work on it several hours. I found blog.garethj./2010/08/… which gave me a lead to the issue. I had to use borderContainer.addChild(contentPane) and not contentPane.placeAt(...). I'll leave the answer here in case other might get stumbled upon this too. [[ I can't post my own answer ]] – Andi T Commented Jul 20, 2011 at 11:02
• Sure, you can post your own answer. Others can post more answers as well and the best answers will hopefully be voted up. – Richard Ayotte Commented Jul 20, 2011 at 17:05
• Yeah, I had to wait 8 hours since posting the question. – Andi T Commented Jul 21, 2011 at 9:01

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I found http://blog.garethj./2010/08/programmatic-page-layouts-using-dojo-and-existing-markup/ which gave me a lead to the issue.

I had to use borderContainer.addChild(contentPane) and not contentPane.placeAt(borderContainer, "last")

I'll leave the answer here in case other might get stumbled upon this too.

borderContainer.addChild(contentPane);
borderContainer.startup(); //DO NOT FORGET TO STARTUP!!!

DO THIS: contentPane.placeAt(borderContainer.domNode, "last");