Dojo BorderContainer / ContentPane

Question

我在一家公司实习，我需要使用另一个实习生在 2012 年编写的程序。所以我做了一些更新，但我遇到了问题:

在这个学员的报告中，网页是左边一栏"menu"请求，底部一栏请求结果，其余的都是[=39= 】不同信息的地图。目前的问题是 'center' 区域的地图，就像 'top'.

区域的地图

Header :

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/soria/soria.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojox/grid/resources/tundraGrid.css">

<script src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false" ></script>

<script>
    require(["dojo/ready", "dojo/parser", "dojo/_base/xhr", "dojo/dom", "dojo/domReady!", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojox/grid/DataGrid", "dojo/store/Memory", "dojo/data/ObjectStore", "dijit/form/Select", "dijit/form/Button", "dijit/form/RadioButton", "dijit/ColorPalette", "dijit/form/TextBox", "dijit/form/SimpleTextarea", "dijit/form/MultiSelect", "dijit/TooltipDialog", "dijit/form/DropDownButton", "dojox/gfx", "dijit/TitlePane", "dijit/form/NumberSpinner", "dojo/store/Memory", "dojo/dom-style", "dojo/query", "dojo/NodeList-dom"]);
</script>
<script src="/static/javascript/queries.js" type="text/javascript"></script>
<script src="/static/javascript/map.js" type="text/javascript"></script>
<script src="/static/javascript/utils.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?v=3&key=KEY"></script>
<link rel="stylesheet" type="text/css" href="/static/css/home.css" />
<link rel="stylesheet" type="text/css" href="/static/css/map.css" />

Body :

<body class="soria" >
<div id="mainLayout" 
    data-dojo-type="dijit/layout/BorderContainer"
    data-dojo-props="design: 'sidebar'">

    <div id="mapLayout" data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region: 'center', splitter: true"
         style="height:500px;">
        <div id="map"></div>
    </div>

    <div id="leftLayout"
        data-dojo-type="dijit/layout/ContentPane"
        data-dojo-props="region: 'left', splitter: true, minSize: 330"
        style="min-width: 330px">
    <p>
        {% include "Home/forms/formQueries.html" %}
    </p>
    <p id="messageLimitNumberLines"  style="display: none">Le nombre de paramètres est limité à cinq. Vous ne pouvez pas en ajouter d'autres.</p>

    </div>

    <div id="datagridLayout" data-dojo-type="dijit/layout/ContentPane" style="min-height: 300px" data-dojo-props="region: 'bottom', splitter: true, minSize: 300">
        <div id="datagrid" data-dojo-type="dojox/rid/DataGrid">
        </div>
    </div>
</div>
</body>

这就是我想要的

这就是我的

我不知道您是否需要其他代码，请告诉我。

Answer 1

如果您想要左侧的窗格，请使用 'leading' 作为 region

的值

   <div id="leftLayout"
        data-dojo-type="dijit/layout/ContentPane"
        data-dojo-props="region: 'leading', splitter: true, minSize: 330"
        style="min-width: 330px">

然后在中心区域放置一个单独的边框容器，地图位于中心区域，数据网格布局位于底部区域。

Regions

Each child element must have an attribute “region” which indicates where it should be positioned (most names are self explanatory):

top

bottom

right

left

center

leading: used have flexible layout in left-to-right/right-to-left environments. In ltr, it will be equivalent to left, in rtl equivalent to right.

trailing: opposite of ‘leading’: right in ltr, left in rtl There can be multiple widgets for each region, in which case their order (i.e. closeness to the edge of the LayoutContainer) is controlled by their relative layoutPriority settings.

There must always be one region marked ‘center’.

来源：https://dojotoolkit.org/reference-guide/1.10/dijit/layout/LayoutContainer.html#dijit-layout-layoutcontainer

Dojo BorderContainer / ContentPane

Dojo BorderContainer / ContentPane

html

django

dojo