2017-05-03 27 views
1

이 링크 된 예제에는 내용 페이지의 레이아웃이 있습니다.dijit layout 최대화 BorderContainer

Example Link

전체 레이아웃을 커버하는 가운데 창을 최대화 할 수있는 방법이 있습니까.

난 당신이 마지막으로, (id="center"가), 당신은 dojo/dom-style을 사용할 수 있습니다에 대한 ID를 설정 한 것을 알고, id="center"

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

만 중심이 있거나, 당신은 또한 국경 용기, 그것은 다른 레이아웃이 100 % 너비와 높이 ?? 당신은 더 많은 것을 설명 할 수 있습니까 –

+0

첫 번째 예제를 클릭하면 맨 아래쪽에 선행 및 후행이 있습니다. 나는 중심 지역에 id = "center"를 준다. 그것이 전체 화면으로 확장하고 싶습니다. 예제 버전에서 센터는 약 500 픽셀 또는 50 %이며 시작할 100 % 너비가 아닙니다. 100 % 너비로 만들면 변경되지 않는 것 같습니다. – techdog

+0

어쩌면 [dojo/dom-style] (https://dojotoolkit.org/reference-guide/1.10/dojo/dom-style.html#set) 도움이 될까요? – barbsan

답변

1

중심 레이아웃의 크기를 조정하려면 중앙 패널과 ID를주고 나서 다음을 사용하여 시도

내 창 너비와 높이를 계산 한 다음 스타일을 가운데 창에 적용하고 또한 모든 창 크기를 조정할 때 preobleme를 사용하도록 설정했습니다. 창은 초기 스타일을 얻습니다. 당신이해야 할 일은 레지를 excute하는 것입니다. 모든 창 크기 조정 이벤트를 쌩쌩 것은 ..

당신이 울부 짖는 소리, 설명 된 예를 볼 수 있습니다

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>

+0

발췌 문장은 완벽하게 작동하는 것 같습니다. Dojo는 모든 창을 최대화하고 최소화하기 위해 레이아웃에 이와 같은 기능을 추가해야합니다. – techdog

+0

@techdog 아마 네, 당신은 js를 확장하고 자신의 욕구를 충족시킬 수있는 자신의 custumized contentepane을 만들 수 있습니다. (usinf define()) –

+0

이것은 ContentPane 인 경우 센터에서 작동하지만 둘 다 다른 동작을 제공하는 BorderContainer 또는 TabContainer 인 경우에는 작동하지 않습니다. – techdog