最大化dijit佈局BorderContainer

在此鏈接的示例中，有一個dijit佈局的contentpanes。最大化dijit佈局BorderContainer

有沒有一種方法，以最大限度地提高中心窗格覆蓋整個佈局。

我已使用以下給中央面板和id id="center"

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

來源

2017-05-03 techdog

你只有中心，或者您有其他的佈局有了它，也就是邊界容器100％的寬度和高度？你能解釋更多 –

在鏈接中，如果你點擊第一個例子，那麼最上面的尾部是領先的和中心的。我給id =「中心」的中心地區。這是我想要擴展到全屏的那個。在我的示例版本中，中心大概是500像素或50％，並不是100％的寬度。如果我把它做成100％寬度，它似乎沒有改變。 – techdog

也許[dojo/dom-style]（https://dojotoolkit.org/reference-guide/1.10/dojo/dom-style.html#set）會有幫助嗎？ – barbsan

要調整中心佈局後，知道您設置了一個id爲這最後的，（id="center"），你可以使用dojo/dom-style嘗試爲窗格佈局設置新的窗口寬度和高度，然後將樣式應用於中間窗格，此處的preobleme也是當您調整窗口大小時窗格應該具有初始樣式，所有你需要做的就是執行resi查懋每個窗口resize事件..

你可以看到波紋管的解釋例如：

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>

來源

2017-05-04 14:08:51

該片段似乎完美地工作。 Dojo應該將這樣的功能添加到佈局中，以最大化和最小化任何窗格。 – techdog

@ techdog可能是的，你可以擴展js並創建你自己的custumized contentepane，以滿足你的需求。（usinf define（）） –

這似乎與中心，如果它是一個ContentPane，但不是如果它是一個BorderContainer或TabContainer都給予不同的行爲。 – techdog

最大化dijit佈局BorderContainer

回答

相關問題