развернуть диджит-макет BorderContainer

В этом связанном примере есть диджит-макет панелей содержимого.

Пример ссылки

Есть ли способ максимизировать центральную панель, чтобы охватить весь макет.

Я попытался использовать следующее после предоставления центральной панели и идентификатора id="center"

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

javascript dojo maximize dijit.layout
person techdog    schedule 03.05.2017    source источник
comment
у вас есть только центр или у вас есть другой макет с ним, а также пограничный контейнер шириной и высотой 100% ?? можете ли вы объяснить больше   -  person Spring    schedule 04.05.2017
comment
В ссылке, если вы нажмете на первый пример, будет верхнее нижнее ведущее и центральное. Я даю id=center центральному региону. Это тот, который я хотел бы развернуть на весь экран. В моей примерной версии центр составляет около 500 пикселей или 50% и не имеет 100-процентной ширины для начала. Если я сделаю его шириной 100%, он, похоже, не изменится.   -  person techdog    schedule 04.05.2017
comment
Может быть, поможет dojo/dom-style?   -  person barbsan    schedule 04.05.2017

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы изменить размер центрального макета, зная, что вы установили идентификатор для этого последнего (id="center"), вы можете использовать dojo/dom-style, чтобы установить новую ширину и высоту для макета панели,

в приведенном ниже фрагменте мне удалось рассчитать ширину и высоту родительского элемента, а затем применить стиль к центральной панели, а также преоблема здесь, когда вы изменяете размер окна, вся панель должна получить первоначальный стиль, т.е. все, что вам нужно сделать, это изменить размер каждого окна событие изменения размера..

вы можете увидеть поясненный пример ниже:

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>

person Spring    schedule 04.05.2017
comment
Фрагмент, кажется, работает отлично. Dojo следует добавить в макет подобную функцию, чтобы разворачивать и сворачивать любую панель. - person techdog; 04.05.2017
comment
@techdog, вероятно, да, но вы можете расширить js и создать свою собственную настроенную панель контента, соответствующую вашим потребностям. (используя определить()) - person Spring; 04.05.2017
comment
Кажется, это работает с центром, если это ContentPane, но не в случае BorderContainer или TabContainer, которые оба ведут себя по-разному. - person techdog; 05.05.2017