最大化 dijit 布局 BorderContainer答案

【问题标题】：maximize dijit layout BorderContainer最大化 dijit 布局 BorderContainer
【发布时间】：2023-03-23 12:32:01
【问题描述】：

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

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

在给出中心面板和 ID id="center" 后，我尝试使用以下内容

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

【问题讨论】：

你只有中心，或者，你有其他布局，边框容器也是100%的宽度和高度？？你能解释一下吗
在链接中，如果您单击第一个示例，则顶部底部尾随前导和中心。我将 id="center" 赋予中心区域。那就是我想扩展到全屏的那个。在我的示例版本中，中心大约是 500 像素或 50%，并且不是 100% 的宽度。如果我将其设为 100% 宽度，它似乎不会改变。
也许dojo/dom-style 会有所帮助？

标签： javascript dojo maximize dijit.layout

【解决方案1】：

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

在下面的 sn-p 中，我设法计算了父宽度和高度，然后将样式应用于中心窗格，这里还有一个问题是当你调整窗口大小时，所有窗格都应该获得初始样式，你所要做的就是正在执行调整每个窗口调整大小事件的大小..

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

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>

【讨论】：

sn-p 似乎工作得很好。 Dojo 应该在布局中添加这样的功能，以最大化和最小化任何窗格。
@techdog 可能是的，但是您可以扩展 js 并创建自己的定制内容窗格以满足您的需求。（使用定义（））
如果它是 ContentPane，这似乎与 center 一起工作，但如果它是 BorderContainer 或 TabContainer 两者都给出不同的行为，则不能。