可能的错误 - 将小部件添加为子项时 dijit/layout/ContentPane 不会调整大小

Question

将小部件添加为子小部件时，小部件 dijit/layout/ContentPane 无法正确调整大小。

重现问题的步骤：

1. 在https://jsfiddle.net/9eja3jtr/ 打开测试用例
2. 点击 10 次按钮“点击我很多次！”。

问题：

• dijit/layout/ContentPane 在将小部件添加为子项时不会调整大小。 插入的内容不完全可见。

我需要增加dijit/layout/ContentPane 的尺寸以适应新添加的小部件，以便所有内部小部件都可见。

我认为这是 dijit 小部件中的一个错误。如果有的话，我想知道一个解决方法。

注意事项： 我已经向道场报告了错误https://bugs.dojotoolkit.org/ticket/19021

require(["dijit/layout/ContentPane", "dijit/TitlePane", "dijit/form/Button", "dojo/domReady!"], function(ContentPane, TitlePane, Button) {
  this._contentPanel = new ContentPane({
    style: "background-color:red;"
  }, "contentPanel");

  this._titlePanel = new TitlePane({
    title: "I'm a TitlePane",
    content: "Collapse me!"
  }, "titlePanel");

  this._button = new Button({
    label: "Click me many times!",
    onClick: function() {
      this._titlePanel.addChild(new Button({
        label: "Test",
        style: "width: 250px"
      }));
    }.bind(this)
  }, "button");

  this._contentPanel.addChild(this._titlePanel);
  this._titlePanel.addChild(this._button);
  this._contentPanel.startup();
});

Answer 1

我认为解决这个问题的干净方法就是用 BorderContainer 包围你的 contentpane ，resize() 将自动触发，否则我认为你应该重新计算所有的东西并调整所有封闭小部件的大小（没有使用 BorderContainer)

在工作的 sn-p 下方：（我已经为内容窗格指定了区域中心以防止错误）

require(["dijit/layout/BorderContainer","dijit/layout/ContentPane", "dijit/TitlePane", "dijit/form/Button", "dojo/domReady!"], function(BorderContainer,ContentPane, TitlePane, Button) {
  this._borderContainer = new BorderContainer({},"borderContainer");
  this._contentPanel = new ContentPane({
  	region: "center",
    style: "min-height:125px; background-color:red;"
  }, "contentPanel");

  this._titlePanel = new TitlePane({
    title: "I'm a TitlePane",
    content: "Collapse me!"
  }, "titlePanel");

  this._button = new Button({
    label: "Click me many times!",
    onClick: function() {
      this._titlePanel.addChild(new Button({
        label: "Test",
        style: "width: 200px"
      }));
      
    }.bind(this)
  }, "button");
	this._borderContainer.addChild(this._titlePanel);
  this._contentPanel.addChild(this._titlePanel);
  this._titlePanel.addChild(this._button);
  this._contentPanel.startup();
});

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div class="claro">
  <div id="borderContainer">
    <div id="contentPanel">
      <div id="titlePanel">
        <div id="button">
        </div>
        <div id="content">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

我认为您想将 ContentPane 的 doLayout 标志设置为 false。然后它不会在嵌套的 ContentPane 上设置大小。另外，删除硬编码的 125px 高度。

Answer 3

您可以通过 CSS 做出简单的解决方法：

#titlePanel {
  height: auto !important;
}

见https://jsfiddle.net/9eja3jtr/3/