道場使用BorderContainer/contentPane的

我在一家公司實習，我需要使用誰在2012年編程它的另一個學員的程序，所以我做了一些更新，但我有一個問題：道場使用BorderContainer/contentPane的

報告這個實習生的網頁是左邊的一個欄，其中有一個「菜單」用於請求，底部是請求結果的一個字段，剩下的空間是一張帶有不同信息的地圖。就目前來看，問題是地區'中心'的地圖，就像地區'頂部'。

頁眉：

<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

我不知道你是否需要另一個代碼，所以告訴我。

來源

2017-04-13 Nitner

嗯，我不明白這個問題在所有。您能否請您張貼您期望的模型圖片？ –

什麼是curren渲染？你可以給這個問題圖片 –

你可以請你創建一個[Plunker]（https://plnkr.co/edit/?p=catalogue）與你所有的來源（本地js腳本） –

如果你想在左側窗格中，使用在跑步地區「龍頭」的區域價值

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

然後你會放置一個獨立的過境集裝箱有地圖在中心區域和數據網格底部區域的佈局。

地區

每個子元素必須具有屬性「區域」，其指示它應該被定位（最名稱是自說明）：

頂部

bottom

權

離開

中心

領先：採用在左到右/右到左的環境，靈活的佈局。在ltr中，它將相當於左邊的，相當於右邊的rtl。

尾隨：的「龍頭」相反：右在LTR，留在RTL可以有對於每個區域中的多個部件，在這種情況下，它們的順序（即，接近程度的LayoutContainer的邊緣）被控制由他們的相對佈局優先設置。

必須始終有一個區域標記爲「中心」。

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

來源

2017-04-18 16:15:02 erotavlas

道場使用BorderContainer/contentPane的

回答

相關問題