Question

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

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

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

后尝试使用以下内容

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

Answer 1

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

在轰鸣声片段中，我设法计算父级宽度和高度，然后将样式应用到中心窗格，这里的前提是当你调整窗口大小时，所有窗格都应该得到初始样式，所有你需要做的事情是每次调整窗口大小调整事件的大小。

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

＆＃13;

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")
  }
});

＆＃13;

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

＆＃13;

<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>

＆＃13;

最大化dijit布局BorderContainer

1 个答案: