Dans cet exemple lié, il existe une disposition dijit des zones de contenu.Agrandir Disposition dijit BorderContainer
est-il un moyen de maximiser le volet central pour couvrir la mise en page entière.
J'ai essayé d'utiliser ce qui suit après avoir donné le panneau central et id id="center"
dijit.ById("center").domNode.style.width='100%'
//and
dijit.ById("center").resize({w:1000,h:1000});
Pour redimensionner la mise en page centrale, sachant que vous avez défini un identifiant pour ce dernier, (id="center"), vous pouvez utiliser dojo/dom-style Dans l'extrait ci-dessous, je calcule la largeur et la hauteur des parents, puis j'applique le style au panneau central, ainsi qu'un préoblème lorsque vous redimensionnez la fenêtre. Le panneau devrait avoir un style initial, si tout ce que vous avez à faire est d'excuter resi zing chaque événement resize fenêtre ..
vous pouvez voir l'exemple expliqué ci-dessous:
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>L'extrait semble fonctionner parfaitement. Dojo devrait ajouter une fonctionnalité comme celle-ci à la mise en page pour maximiser et minimiser n'importe quel volet. – techdog
@techdog probablement oui, bu t vous pouvez prolonger le js et créer votre propre Contentepane custumized que doux vos besoins. (usinf define()) –
Cela semble fonctionner avec le centre s'il s'agit d'un ContentPane mais pas si c'est un BorderContainer ou un TabContainer qui donnent tous deux des comportements différents. – techdog
vous avez seulement le centre ou, vous avez d'autres la mise en page avec elle, est également le conteneur à la frontière 100% largeur et hauteur ?? pouvez-vous expliquer plus –
Dans le lien, si vous cliquez sur le premier exemple, il y a le début et le milieu du haut. Je donne id = "centre" à la région centrale. C'est celui que j'aimerais étendre en plein écran. Dans ma version d'exemple, le centre est environ 500 pixels ou 50% et n'est pas 100 pour cent de largeur pour commencer. Si je fais 100% de largeur, ça ne semble pas changer. – techdog
Peut-être que [dojo/dom-style] (https://dojotoolkit.org/reference-guide/1.10/dojo/dom-style.html#set) aiderait? – barbsan