Search code examples
javagwtgxt

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?


Solution

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