Dojo BorderContainer / ContentPane答案

【问题标题】：Dojo BorderContainer / ContentPaneDojo BorderContainer / ContentPane
【发布时间】：2017-04-13 11:46:40
【问题描述】：

我在一家公司实习，我需要使用另一个在 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>

这就是我想要的

这就是我所拥有的

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

【问题讨论】：

嗯，我根本无法理解这个问题。能否请您发布您期望的样机图片？
当前的渲染是什么？你能给出问题图片吗
能否请您使用所有来源（本地 js 脚本）创建一个 Plunker

标签： html django dojo

【解决方案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">

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

地区

每个子元素必须有一个属性“region” 指示它应该定位的位置（大多数名称是 self 解释）：

顶部

底部

右

左

居中

leading: 使用灵活的布局从左到右/从右到左的环境。在 ltr 中，它将是等价于左，在 rtl 中等价于右。

尾随：与 ‘leading’: right in ltr, left in rtl 可以有多个小部件用于每个区域，在这种情况下它们的顺序（即靠近边缘 LayoutContainer) 由它们的相对 layoutPriority 控制设置。

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

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

【讨论】：