Question

我在一家公司接受培训，我需要使用2012年编程的另一名受训人员的程序。所以我做了一些更新，但我遇到了问题：

在该受训者的报告中，网页左侧是一列，其中包含请求的“菜单”，底部是请求结果的字段，在所有剩余的空间中是具有不同信息的地图。目前问题是区域“中心”的地图，就像区域“顶部”一样。

标题：

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

这就是我想要的
That is what I want

这就是我拥有的
That is what I have

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

Answer 1

如果您想要左侧的窗格，请使用＆＃39; leading＆＃39;对于区域的价值

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

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

地区

每个子元素必须具有属性“region”   表示它应该放在哪里（大多数名字都是自己的   说明）：

顶部

底部

正确

左

中心

领先：使用了灵活的布局   从左到右/从右到左的环境。在ltr中，它将是   相当于左，rtl相当于右。

尾随：对面   '领先'：在ltr中，在rtl中左边可以有多个小部件   每个区域，在这种情况下，他们的顺序（即靠近边缘）   LayoutContainer）由它们的相对layoutPriority控制   设置。

必须始终有一个区域标记为“中心”。

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

Dojo BorderContainer / ContentPane

1 个答案: