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

osh3o9ms 于 2022-12-16 发布在 Dojo

关注(0)|答案(3)|浏览(160)

将小部件添加为子项时，小部件dijit/layout/ContentPane无法正确调整大小。
重现问题的步骤：
1.在https://jsfiddle.net/9eja3jtr/打开测试用例
1.点击10次按钮“多次点击我！"。
发布日期：

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

我需要增加dijit/layout/ContentPane的尺寸，以容纳新添加的小部件，这样所有内部小部件都应该可见。
我认为这是dijit小部件中的一个bug。如果有的话，我想知道一个变通方法。
注意：我已经向dojo 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();
});

dojo

来源：https://stackoverflow.com/questions/43917164/possible-bug-dijit-layout-contentpane-does-not-resize-when-adding-widgets-as-c

3条答案

按热度按时间

kkih6yb81#

我认为解决这个问题的简单方法是用一个BorderContainer包围你的contentpane，resize（）将自动触发，否则我认为你应该重新计算所有的东西，调整所有封闭的小部件的大小（不使用BorderContainer）
下面是一个工作片段：（我已经为内容窗格指定了区域中心以防止错误）

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>

赞(0）回复(0）举报 2022-12-16

ubby3x7f2#

我认为你应该把ContentPane的doLayout标志设置为false，这样它就不会在嵌套的ContentPane上设置大小。另外，删除硬编码的125px高度。

赞(0）回复(0）举报 2022-12-16

cuxqih213#

您可以通过CSS进行简单的变通：

#titlePanel {
  height: auto !important;
}

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

赞(0）回复(0）举报 2022-12-16

我来回答

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

3条答案

相关问题

热门标签

最新问答