可能的错误 - dijit/layout/ContentPane 在将小部件添加为子项时不会调整大小
Possible bug - dijit/layout/ContentPane does not resize when adding widgets as children
小部件 dijit/layout/ContentPane
在将小部件添加为子项时未正确调整大小。
重现问题的步骤:
- 在 https://jsfiddle.net/9eja3jtr/
打开测试用例
- 点击按钮 10 次 "Click me many times!"。
问题:
dijit/layout/ContentPane
将小部件添加为子项时不会调整大小。
插入的内容不完全可见。
我需要增加 dijit/layout/ContentPane
的尺寸以容纳新添加的小部件,以便所有内部小部件都应该可见。
我认为这是 dijit 中的一个错误 widget.I 想知道解决方法(如果有的话)。
备注:
我已经向道场报告了错误 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();
});
我认为解决此问题的最简单方法是用 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>
我认为您想将 ContentPane 的 doLayout
标志设置为 false。然后它不会在嵌套的 ContentPane 上设置大小。另外,删除硬编码的 125px 高度。
您可以通过 CSS 进行简单的解决方法:
#titlePanel {
height: auto !important;
}
小部件 dijit/layout/ContentPane
在将小部件添加为子项时未正确调整大小。
重现问题的步骤:
- 在 https://jsfiddle.net/9eja3jtr/ 打开测试用例
- 点击按钮 10 次 "Click me many times!"。
问题:
dijit/layout/ContentPane
将小部件添加为子项时不会调整大小。 插入的内容不完全可见。
我需要增加 dijit/layout/ContentPane
的尺寸以容纳新添加的小部件,以便所有内部小部件都应该可见。
我认为这是 dijit 中的一个错误 widget.I 想知道解决方法(如果有的话)。
备注: 我已经向道场报告了错误 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();
});
我认为解决此问题的最简单方法是用 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>
我认为您想将 ContentPane 的 doLayout
标志设置为 false。然后它不会在嵌套的 ContentPane 上设置大小。另外,删除硬编码的 125px 高度。
您可以通过 CSS 进行简单的解决方法:
#titlePanel {
height: auto !important;
}