Dojo BorderContainer布局

Question

目前我有一个borderContainer布局，如下所示：

此布局的代码是：

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

我希望有一个布局为（2列，右列有3行），如下所示：

Answer 1

您可以将另一个小部件添加到顶部区域。

<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/

另见：

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

Answer 2

BorderContainers可以作为区域嵌入。你的例子是：

• bordercontainer（parent）
  • contentpane（区域左显式宽度）
  • contentpane（区域顶部显式高度）
  • bordercontainer（区域中心，流体）
    • contentpane（区域顶部，显式高度）
    • contentpane（区域中心，流体）