javascript - 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：我可以将两个或更多小部件添加到同一个 BorderContainer 区域吗？

Answer 2

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

• 边界容器（父级）
  • contentpane（区域左显式宽度）
  • contentpane（区域顶部显式高度）
  • 边界容器（区域中心，流体）
    • contentpane（区域顶部，显式高度）
    • contentpane（区域中心，流体）