dojo - 尝试使用 BorderContainer (dojo) 的结构

Question

我想要一个像图片一样的 BorderContainer，顶部有两个 ContentPane，底部有一个，但我无法对区域进行操作，所以我不知道是否有办法做到这一点地区。

谢谢

Answer 1

这在一定程度上取决于您在调整窗口大小时希望窗格如何缩放。你想让底部窗格占​​据所有额外的高度吗？您希望前两个窗格保持 50/50 的宽度吗？

假设您希望空间的划分在宽度和高度上保持 50/50，您可以这样做：

<div data-dojo-type="dijit/layout/BorderContainer">

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'leading'" 
         style="width: 50%">leading</div>

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'center'">center</div>

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'bottom'" 
         style="height: 50%">bottom</div>
</div>

通常，当您调整窗口大小时，中心区域将占用所有额外空间，但您可以在前导/顶部/尾随/底部区域设置相对宽度/高度，以便它们始终使用屏幕的该份额。

Answer 2

我想你想要一个嵌套的边框容器。基本上，您需要一个顶部和中心（或中心和底部），并在顶部放置一个左侧和中心（或中心和右侧）。

<div data-dojo-type="dijit/layout/BorderContainer">

    <div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="region: 'top'" style="height: 50%">

        <div data-dojo-type="dijit/layout/ContentPane" style="width: 50%"
             data-dojo-props="region: 'left'">inner top left</div>

         <div data-dojo-type="dijit/layout/ContentPane" 
             data-dojo-props="region: 'center'">inner top center</div>
    </div>

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'center'">outer center</div>
</div>