当前位置：文江博客话题详情

Dojo StackContainer 子级不会在浏览器最大化/恢复时调整大小

发布于 2024-09-03 05:35:23 字数 1492 浏览 5 评论 0原文

我在 dojo 1.4 应用程序中有以下嵌套布局：

BorderContainer 1

--> Stack Container 1

-->-->BorderContainer 2

-->-->BorderContainer 3

StackContainer 的宽度和高度均为 100%。当我使用最大化/恢复调整浏览器窗口大小时，StackContainer 会正确调整到其父 BorderContainer 的中心区域。

我遇到的问题是 StackContainer 子级（BorderContainer 2 和 3）不会根据 StackContainer 的 contentBox 调整大小。

您需要做一些特殊的事情来强制调整 StackContainer 子级的大小吗？我尝试过调用 StackContainer1.resize() 但这没有什么区别。

提前致谢。

补充信息：

感谢peller的回复。包含 StackContainer 的小部件层次结构实际上是一个自定义小部件，因此 StackContainer 实际上并不直接位于 BorderContainer 中，而是将其高度和宽度显式设置为 100%。这有效，并且 StackContainer 在浏览器最大化时正确调整大小。 stackcontainer 的直接子级是 BorderContainer，当 StackContainer 调整大小时，这些 BorderContainer 不会调整大小。确切的标记是：

<div dojoType="dijit.layout.StackContainer" style="height:100%;width:100%;">
    <div dojoType="dijit.layout.BorderContainer" gutters="false" style="height:100%;width:100%;padding:0;" id="bcWrongSize">
    </div>
</div>

它是 BorderContainer 'bcWrongSize'，不会随父 StackContainer 一起调整大小。在 BorderContainer 上指定的内联高度和宽度由 StackContainer 替换为显式像素尺寸。但是，在浏览器调整大小时，StackContainer 会正确调整为其父窗口小部件的大小，但 BorderContainer 上的显式高度和宽度不正确。顺便说一句，调用 StackContainer 上的布局方法，并调整 BorderContainer（作为可见子容器）的大小。但是，它传递给 BorderContainer 的 _contentBox 尺寸是 StackContainer 调整大小之前的尺寸。 dojo.marginBox 计算的宽度和高度不正确（offsetWidth 和 offsetHeight 是浏览器最大化之前的尺寸）。也许这个问题是因为 StackContainer 是自定义小部件的 subContainerWidget，因此宽度和高度的大小都是 100%？

原文

I have the following nested layout in a dojo 1.4 app:

BorderContainer 1

--> Stack Container 1

-->-->BorderContainer 2

-->-->BorderContainer 3

The StackContainer is sized with width and height 100%.
When I resize the browser window using maximise/restore, the StackContainer correctly resizes to the center region of it's parent BorderContainer.

The problem I have is that the StackContainer children (BorderContainer 2 and 3) do not get resized to the StackContainer's contentBox.

Is there something special you have to do to force a resize of StackContainer children?
I have tried calling StackContainer1.resize() but this makes no difference.

Thanks in advance.

Additional information:

Thanks for the reply peller. The widget hierachy that contains the StackContainer is actually a custom widget, so the StackContainer is not actually in a BorderContainer directly, but has its height and width explicitly set to 100%. This works and the StackContainer is resized correctly on browser maximise. The direct children of the stackcontainer are BorderContainers and it is these BorderContainers that do not get resized when the StackContainer is resized. The exact markup is:

<div dojoType="dijit.layout.StackContainer" style="height:100%;width:100%;">
    <div dojoType="dijit.layout.BorderContainer" gutters="false" style="height:100%;width:100%;padding:0;" id="bcWrongSize">
    </div>
</div>

It is the BorderContainer 'bcWrongSize' that does not get resized with the parent StackContainer. The inlined height and width specified on the BorderContainer are replaced with explicit pixel dimensions by the StackContainer. However, on browser resize, the StackContainer is resized to its parent widget correctly, but the explicit height and width on the BorderContainer are incorrect.
Incedentally, the layout method on the StackContainer is called, and it resizes the BorderContainer (being the visible child). However, the _contentBox dimensions that it passes to the BorderContainer are the dimensions of the StackContainer BEFORE its resize. The width and height computed by dojo.marginBox are incorrect (the offsetWidth and offsetHeight are the dimensions from before the browser maximise).
Maybe this issue is because the StackContainer is the subContainerWidget of a custom widget and so is sized with width and height 100%?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尛丟丟 2024-09-10 05:35:23

我们在一个项目中遇到了类似的问题。下面是对我们有用的片段。请注意 stackContainer 的区域的使用（它位于边框容器中）以及内部边框容器上缺少高度/宽度。

<div dojotype="dijit.layout.StackContainer" jsid="buttonStack" region="bottom" style="height: 180px">
      <div jsid="selectionButtons" dojotype="dijit.layout.BorderContainer" gutters="false">
           <div dojotype="dijit.layout.ContentPane" region="bottom">
                <button id="btnClearSelection" dojotype="dijit.form.Button" 
                     label="Clear Selection" disabled> </button>
                <button id="btnClearAll" dojotype="dijit.form.Button" 
                     label="Clear All" disabled> </button>
            </div>
      </div>
<div>

We had a similar problem on a project. Below is the snippet that worked for us. Note the use of region for the stackContainer (it's in a bordercontainer) and the lack of height/width on the inner border containers.

<div dojotype="dijit.layout.StackContainer" jsid="buttonStack" region="bottom" style="height: 180px">
      <div jsid="selectionButtons" dojotype="dijit.layout.BorderContainer" gutters="false">
           <div dojotype="dijit.layout.ContentPane" region="bottom">
                <button id="btnClearSelection" dojotype="dijit.form.Button" 
                     label="Clear Selection" disabled> </button>
                <button id="btnClearAll" dojotype="dijit.form.Button" 
                     label="Clear All" disabled> </button>
            </div>
      </div>
<div>

回复收藏 0 原文

~没有更多了~