0

我有Widget一个TabBar.

<g:DockLayoutPanel unit="EM">
  <g:north size="2.5">
    <g:TabBar height="2.5em" ui:field="tabBar" />
  </g:north>
  <g:center>
    <g:SimpleLayoutPanel ui:field="contentWidget" />
  </g:center>
</g:DockLayoutPanel>

如果用户选择一个选项卡，我将小部件设置为contentWidget.

@UiHandler("tabBar")
void onTabsSelection(final SelectionEvent<Integer> event) {
  // ...
}

这完美！

几个选项卡有一个共同的小部件，所以我想使用这个小部件的单个实例（用于同步）。

<g:LayoutPanel>
  <!-- query -->
  <g:layer top="0" height="3em">
    <g:HorizontalPanel width="100%" height="3em" verticalAlignment="ALIGN_MIDDLE">
      <g:SimpleLayoutPanel ui:field="queryNode" />
      <g:cell horizontalAlignment="ALIGN_RIGHT">
        <my:StepPager ui:field="pager" />
      </g:cell>
    </g:HorizontalPanel>
  </g:layer>
  <!-- map -->
  <g:layer left="0" right="17em" top="3em" bottom="0">
    <g:SimpleLayoutPanel ui:field="mapNode" />
  </g:layer>
</g:LayoutPanel>

当然，一个小部件只能附加到一个父级。所以我重写了onAttach所有选项卡小部件的方法来读取我的查询小部件。

@Override
protected void onAttach() {
  queryNode.setWidget(queryBar);
  super.onAttach();
}

该方法将被调用，并且小部件位于 DOM 中，但它不可见。我认为问题在于SimpleLayoutPanel queryNode大小为 3x35 像素的单元格。

4

0 回答 0