java - gxt 将图像与组合框对齐

Question

我有一个 loading.gif 图像，需要将其与组合框对齐

<container:VerticalLayoutContainer addStyleNames="{mystyle}">
    <form:FieldLabel text="{constants.typ}" labelAlign="TOP">
        <form:widget>
            <form:ComboBox ui:field="type" width="300" allowBlank="true" forceSelection="true" triggerAction="ALL" />
        </form:widget>
    </form:FieldLabel>
    <g:Image resource="{loadingGif}" ui:field="Monimage" />
</container:VerticalLayoutContainer>

在我看来，我有一个用于存储数据的列表存储。 我试图将我的图像放入 <form:widget> 中但它引发了一个异常(exception)，即每个 ui:child 只能有一个元素。

使用此代码，我的图像位于组合框下方，我需要它位于右侧。 有人可以帮助我吗？

Answer 1

当 uiBinder 解析器看到 <form:widget> 时，它尝试调用方法 FieldLabel#setWidget(theComponentUnderTheTag) 。

这就是为什么 <form:widget> 下有多个元素是没有意义的。标签。

当我无法使用 GWT 做我想做的事情时，我会回退到一些简单的旧 HTML。使用 uiBinder，您可以通过 HTMLPanel 来实现此目的:

<container:VerticalLayoutContainer addStyleNames="{mystyle}">
  <form:FieldLabel text="{constants.typ}" labelAlign="TOP">
    <form:widget>

      <g:HTMLPanel>
      <!--
        Here, I can now place plain old HTML :) 
        Let's place the 2 components via 2 divs and a float:left.
      -->
        <div style="float:left">
          <form:ComboBox ui:field="type" width="300" allowBlank="true" forceSelection="true" triggerAction="ALL" />
        </div>
        <div>
          <g:Image resource="{loadingGif}" ui:field="Monimage" />                                          
        </div>
      </g:HTMLPanel>

    </form:widget>
  </form:FieldLabel>
</container:VerticalLayoutContainer>

如果您不想使用 HTML 面板，可以将这两个元素放在 <form:widget> 中标签。

但要实现这一目标，您需要将它们包装在一个组件中(例如 HorizontalPanel )，因为您只能在 <form:widget> 下放置一个小部件。 .

<form:FieldLabel text="{constants.typ}" labelAlign="TOP">
    <form:widget>
        <g:HorizontalPanel>
          <g:ComboBox ui:field="type" width="300" allowBlank="true" forceSelection="true" triggerAction="ALL" />
          <g:Image resource="{loadingGif}" ui:field="Monimage" />
        </g:HorizontalPanel>
    </form:widget>
</form:FieldLabel>