Question

我有一个侧面板（查询表单），一个中心面板（一张地图）和一个高度为2％的底部面板。当在侧面板上完成查询时，我希望底部面板显示（高度= 30％）并显示结果。

我正在使用BorderContainers。

我可以让底部面板改变尺寸，但你必须触摸底部面板并调整大小以便tabcontainer（保持结果）展开。否则，它是一个空面板，只显示标签的顶部（从高度= 2％）。

<div id="bottompanel"  data-dojo-type="dijit/layout/TabContainer" 
data-dojo-props="splitter: true, region:'bottom'"  style=" height: 2%; ">
    <div data-dojo-type="dijit/layout/ContentPane" title="tab #1">tab pane #1</div>
    <div data-dojo-type="dijit/layout/ContentPane" title="tab #2">tab pane #2</div>
    <div data-dojo-type="dijit/layout/ContentPane" title="tab #3">tab pane #3</div>
</div>


function openResults() {   
toggleResults(bottompanel);
}

function toggleResults(contentElement) {
   require(["dojo/dom-geometry", "dojo/dom", "dojo/dom-style"],
   function (domGeom, dom, domStyle) {

      var node = dom.byId(contentElement);
      var computedStyle = domStyle.getComputedStyle(node);
      var size = domGeom.getMarginBox(node);

      if (size.h > 20) {
        domStyle.set(dom.byId("bottompanel"), "display", "none");
        domStyle.set(dom.byId("centerpanel"), "height", "100%");

    } else {
          domStyle.set(dom.byId("bottompanel"), "display", "block");
          domStyle.set(dom.byId("bottompanel"), "height", "30%");
          domStyle.set(dom.byId("centerpanel"), "height", "70%");
      }
  }); 
}

我不知道如何刷新或调整大小。

Answer 1

如果所有内容都包含在BorderContainer中，您只需在BorderContainer上调用.layout（）即可调整所有内容。

以下是我在自己的代码（Dojo 1.9）中所做的一个示例：

var leftPane = dom.byId("leftPane");
var rightPane = dom.byId("rightPane");
var bc = registry.byId("console");

domGeometry.setContentSize(leftPane, {
    w: 140
});
domGeometry.setContentSize(rightPane, {
    w: 415
});
bc.layout();

调整ContentPane的大小

1 个答案: