javascriptdojomaximizedijit.layout

maximize dijit layout BorderContainer

In this linked example there is a dijit layout of contentpanes.

Example Link

Is there a way to maximize the center pane to cover the whole layout.

I have tried using the following after giving the center panel and id id="center"

dijit.ById("center").domNode.style.width='100%'
//and
dijit.ById("center").resize({w:1000,h:1000});
Solution

  • To resize the center layout,knowing that you had set an id for this last , (id="center") , you can use dojo/dom-style to set the a new widht and height for the pane layout,

    in the bellow snippet I'managed to calculate parent width and height then apply the style to the center pane , also a preobleme here is when you resize the window all pane should get initial style , si all you have to do is excute resizing every window resize event ..

    you can see the explained example bellow : 

    require([ "dojo/on","dojo/dom-style", "dojo/ready", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"],function(On, domStyle,ready,registry,BorderContainer,ContentPane){
	ready(function(){
    // apply resize after 3 seconde
    window.setTimeout(resizeCenter,3000);
    On(window,"resize",function(e){
      console.log(e)
    	resizeCenter();
    })
  })
  
  function resizeCenter(){
  	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>