GWT/GXT 容器渲染位置问题

Question

在尝试将绝对定位的 HorizontalContainer 插入其他容器时，我遇到了一个奇怪的问题。如果仍在渲染兄弟姐妹（设置了掩码），则此绝对容器按其宽度推动他的下一个兄弟姐妹。

示例：.

//parent container, holding all the widgets
HorizontalLayoutContainer hlc;

//widgets that are inserted into hlc container from the start
HBoxLayoutContainer hbox1;
HBoxLayoutContainer hbox2;
HBoxLayoutContainer hbox3;

//container that's inserted into hlc onMouseOver event. It can be inserted while hlc hboxes are still being rendered
HorizontalLayoutContainer panelContainer = new HorizontalLayoutContainer(); 
panelContainer.getElement().getStyle().setZIndex(13);
panelContainer.getElement().getStyle().setPosition(Position.ABSOLUTE);
panelContainer.getElement().getStyle().setWidth(55, Unit.PX);
panelContainer.getElement().getStyle().setHeight(18, Unit.PX);
panelContainer.getElement().getStyle().setFloat(Float.LEFT);

现在假设用户将鼠标悬停在具有 hboxes1-3 的 hlc 容器上，但是其中一些具有掩码集（数据仍在加载），例如 hbox1.mask()。 onMouseOver 事件 panelContainer 插入到 hlc:

hlc.insert(panelContainer, 0, new HorizontalLayoutData(55, 18));

然而，由于 hboxes 仍在渲染，panelContainer 将 hbox1 向右推 55px（它的长度）。即使它有 position:absolute;.

                left:55px; should be left: 0px;
                -->
|panleContainer|hbox1|hbox2|hbox3|

关于如何正确插入 panelContainer 有什么建议吗？为什么绝对定位被忽略了？

注：

如果我等待 hboxes 被渲染，panelContainer 被正确插入，hbox1 没有被推送。

避免xy问题的说明：

简短摘要：向现有容器 (WidgetBox) 添加一个具有预定义宽度的绝对定位框（为清楚起见，我们称其为 DragBox）。 WidgetBox 是一个 HorizontalLayoutContainer，它有 2 或 3 个 HBoxLayoutContainer。 WidgetBox children (HBoxLayoutContainers) 的宽度为百分比。例子：如果WidgetBox有2个children，它们的宽度分别是0.3和0.7，如果有3个children，那么它们的宽度分别是0.3、0.4、0.3；

WidgetBox 的大小取决于其 parent (SimpleContainer->VerticalLayoutContainer->WidgetBox)。

预期： 当鼠标悬停在任何 WidgetBox 容器上时，将添加一个新项目 (DragBox) 作为 WidgetBox 的第一个元素。它不应该影响 WidgetBox children 无论如何。它应该作为一个绝对（在 WidgetBox 边界内）框。

结果： 如果 WidgetBox 或其 parent 的布局是强制的（通过 forceLayout()），则 DragBox 会影响第一个 WidgetBox child。如果不使用forceLayout()，DragBox不影响WidgetBoxchildren.

Answer 1

由于在我的例子中 forceLayout() 仅用于确保正确的 WidgetBox children（见我的编辑）内容格式，我不想强制布局 children对于 widgetBox。

为了避免这种情况，我强制在 widgetBox 的每个 child 上进行布局，而不是 parent。

示例：.

HorizontalLayoutContainer (parent) 
  -> HorizontalLayoutContainer (child 1, removed/added on mouseOver/Out)
  -> HBoxLayoutContainer (child 2)
  -> ...

我曾经在 parent 上强制布局，例如 parent.forceLayout() 会强制布局 children 并调整 parent 容器的大小。

为了避免，如上所述，我分别在每个 child 上强制布局：

for(int i = 0; i < parent.getWidgetCount(); i++) {
    if (parent.getWidget(i) instanceof ResizeContainer) {
        ResizeContainer widget = (ResizeContainer) parent.getWidget(i);
        widget.forceLayout();
    }
}

GWT/GXT 容器渲染位置问题

GWT/GXT containers render position issues

gwt

gxt