最大化 dijit 布局 BorderContainer

Question

在这个链接示例中，有一个内容窗格的 dijit 布局。

有没有办法最大化中心窗格以覆盖整个布局。

在给出中心面板和 id id="center"

后，我尝试使用以下内容

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

Answer 1

要调整中心布局的大小，知道您已经为最后一个 (id="center") 设置了 id，您可以使用 dojo/dom-style 为窗格布局设置新的宽度和高度,

在下面的代码片段中，我设法计算了父级的宽度和高度，然后将样式应用于中心窗格，这里还有一个前提是当您调整 window 所有窗格的大小时都应获得初始样式，si all您需要做的是在每个 window 调整大小事件 ..

中执行调整大小

你可以看到下面的解释示例：

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>

最大化 dijit 布局 BorderContainer

maximize dijit layout BorderContainer

javascript

dojo

maximize

dijit.layout