gxt align image with combobox

I have a loading.gif image that I need to align with a combobox

<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>

On my view, I have a liststore for my datas. I have tried to put my image inside the <form:widget> but it start an exception that say that I can only have one element per ui:child.

With this code, my image is under the combobox, and I need it to be on it's right side. Can anybody help me?

---

When the uiBinder parser sees <form:widget> , it tries to call method FieldLabel#setWidget(theComponentUnderTheTag) .

That's why it does not make sense to have more than one element under the <form:widget> tag.

When I cannot do what I want with GWT, I fallback to some plain old HTML. With uiBinder, you can achieve this with a 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>

If you don't want to use HTML Panel, you can put both elements in the <form:widget> tag.

But to achieve this, you need to wrap them in one component (for example, an HorizontalPanel) because you can place only one widget under <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>

链接地址: http://www.djcxy.com/p/64408.html

上一篇: 将折叠事件添加到GWT

下一篇: gxt将图像与组合框对齐