1

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

rockstar
  • 1,322
  • 1
  • 20
  • 37

2 Answers2

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?

Community
  • 1
  • 1
Craig Swing
  • 8,152
  • 2
  • 30
  • 43
1

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)
dante
  • 631
  • 3
  • 4
  • 1
    I have tried this approach before and found it difficult to maintain a consistent padding between all the widgets. – Craig Swing Jun 20 '12 at 19:01