Dojo BorderContainer Layout

Question

Currently I have a borderContainer layout as shown below:

My code for this layout is:

<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:true, region:'left'" style="width: 150px;" id="treeSection">Tree menu display here</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:true, region:'top'" style="height:200px;" id="gridSection">Dojo Grid display here
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:true, region:'center'" id="contactView" data-dojo-id="contactView">contact detail here
</div>
</div>

I want to have a layout as (2 column, right column has 3 rows) shown below:

Answer 1

You can add another widget to the top region.

<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:true, 
  region:'top'" style="height:20px;" id="pageSection">
  Pagination goes here
</div>

http://jsfiddle.net/cswing/Kjr78/

See also:

Dojo: Can I add two or more widgets to the same BorderContainer region?

Answer 2

BorderContainers can be embedded as regions. Your example would be:

• bordercontainer (parent)
  • contentpane (region left explicit width)
  • contentpane (region top explicit height)
  • bordercontainer (region center, fluid)
    • contentpane (region top, explicit height)
    • contentpane (region center, fluid)