Search code examples
javascriptdojodijit.layoutborder-container

Dojo BorderContainer Layout

Currently I have a borderContainer layout as shown below:

enter image description here

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: enter image description here

Solution

  • 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?