In diesem verknüpften Beispiel gibt es ein Dijit-Layout der Inhaltspaneele.Dijit-Layout maximieren BorderContainer
Gibt es eine Möglichkeit, den mittleren Bereich zu maximieren das gesamte Layout zu decken.
Ich habe versucht, die folgende Verwendung nach der mittleren Platte geben und id id="center"
dijit.ById("center").domNode.style.width='100%'
//and
dijit.ById("center").resize({w:1000,h:1000});
die Mitte Layout Um die Größe, dass Sie eine ID gesetzt hatte, zu wissen, für diese letzte, (id="center"), können Sie dojo/dom-style verwenden Um eine neue Breite und Höhe für das Fensterlayout festzulegen,
im unteren Ausschnitt Ich habe verwaltet, um Elternbreite und -höhe zu berechnen dann wenden Sie den Stil auf die mittlere Scheibe, auch hier ist eine Vorbemerkung, wenn Sie die Größe des Fensters alle Fenster sollte anfängliche Stil bekommen, alles, was Sie tun müssen, ist resi jedes Fenster Grßenänderungsereignis Zing ..
können Sie das erklärt Beispiel siehe unten:
require([ "dojo/on","dojo/dom-style", "dojo/ready", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"],function(On, domStyle,ready,registry,BorderContainer,ContentPane){
\t ready(function(){
// apply resize after 3 seconde
window.setTimeout(resizeCenter,3000);
On(window,"resize",function(e){
console.log(e)
\t resizeCenter();
})
})
function resizeCenter(){
\t var centerPane = registry.byId("center").domNode;
parentWidth = domStyle.get(centerPane.parentNode,"width");
parentWidth -=28;
parentHeight = domStyle.get(centerPane.parentNode,"height");
parentHeight -=28;
///why removing 28 because 5*2 margin + 8*2 padding +2*1 borders = 28
//set top left right bottom if all regions are set
domStyle.set(centerPane,"top","5px");
domStyle.set(centerPane,"bottom","5px");
domStyle.set(centerPane,"left","5px");
domStyle.set(centerPane,"right","5px");
domStyle.set(centerPane,"z-index",10);
domStyle.set(centerPane,"width",parentWidth+"px");
domStyle.set(centerPane,"height",parentHeight+"px")
}
});html, body {
width: 100%;
height: 100%;
margin: 0;
}<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script>
dojoConfig= {
parseOnLoad: true,
async: true
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top pane</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" id="center">center</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div>
</div>
</body>Das Snippet scheint perfekt zu funktionieren. Dojo sollte dem Layout eine Funktion wie diese hinzufügen, um jeden Bereich zu maximieren und zu minimieren. – techdog
@techdog wahrscheinlich ja, bu t Sie können die js erweitern und erstellen Sie Ihre eigenen custumized contentepane, dass Ihre Bedürfnisse süß. (usinf define()) –
Das scheint mit center zu funktionieren, wenn es ein ContentPane ist, aber nicht, wenn es ein BorderContainer oder TabContainer ist, die beide unterschiedliche Verhaltensweisen geben. – techdog
Sie nur das Zentrum haben oder haben Sie andere Layout mit ihm, auch ist der Behälterrand 100% Breite und Höhe? Können Sie mehr erklären? –
In der Verbindung, wenn Sie auf das erste Beispiel klicken, gibt es oben nach unten führende und Mitte. Ich gebe id = "center" für die mittlere Region. Das ist die, die ich auf den Vollbildmodus erweitern möchte. In meiner Beispielversion ist das Zentrum etwa 500 Pixel oder 50% und es ist nicht 100 Prozent Breite zu starten. Wenn ich es 100% Breite mache, scheint es nicht zu ändern. – techdog
Vielleicht [Dojo/Dom-Stil] (https://dojotoolkit.org/reference-guide/1.10/dojo/dom-style.html#set) würde helfen? – barbsan