Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    jgates0 is on a distinguished road

      0  

    Default FieldLabel added vertically in HorizontalLayoutContainer: Beta3

    FieldLabel added vertically in HorizontalLayoutContainer: Beta3


    In beta 3 I have been trying to add multiple FieldLabels with ComboBox's to a HorizontalLayoutContainer, but they are added into a single vertical column one on top of another. If I add just the ComboBox, they are added properly (into a single horizontal row one next to the other).

  2. #2
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Can you please post a fully working testcase implementing EntryPoint that shows this behaviour?

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    jgates0 is on a distinguished road

      0  

    Default


    After further investigation it appears it is an issue when adding a widget dynamically to a UiBinder. In the following example you can click the button to add a combobox but it adds it to the front of the container, overlapping a widget that is already there.

    The following is the java code:


    package com.sencha.gxt.explorer.client.layout;


    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.event.dom.client.ClickEvent;
    import com.google.gwt.event.dom.client.ClickHandler;
    import com.google.gwt.safehtml.shared.SafeHtml;
    import com.google.gwt.safehtml.shared.SafeUri;
    import com.google.gwt.uibinder.client.UiBinder;
    import com.google.gwt.uibinder.client.UiField;
    import com.google.gwt.user.client.ui.Button;
    import com.google.gwt.user.client.ui.IsWidget;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.google.gwt.user.client.ui.Widget;


    import com.sencha.gxt.cell.core.client.form.ComboBoxCell.TriggerAction;
    import com.sencha.gxt.core.client.XTemplates;
    import com.sencha.gxt.data.shared.LabelProvider;
    import com.sencha.gxt.data.shared.ListStore;
    import com.sencha.gxt.data.shared.ModelKeyProvider;
    import com.sencha.gxt.data.shared.PropertyAccess;
    import com.sencha.gxt.legacy.client.data.BaseModelData;
    import com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer;
    import com.sencha.gxt.widget.core.client.form.ComboBox;
    import com.sencha.gxt.widget.core.client.form.FieldLabel;
    import com.sencha.gxt.widget.core.client.form.FormPanel.LabelAlign;


    public class HorizontalLayoutUiBinderExample implements IsWidget, EntryPoint {


    interface ComboBoxTemplates extends XTemplates {


    @XTemplate("<img width=\"16\" height=\"11\" src=\"{imageUri}\"> {name}")
    SafeHtml country(SafeUri imageUri, String name);


    @XTemplate("<div qtip=\"{slogan}\" qtitle=\"State Slogan\">{name}</div>")
    SafeHtml state(String slogan, String name);


    }


    interface CountryProperties extends PropertyAccess<BaseModelData> {
    ModelKeyProvider<BaseModelData> abbr();


    LabelProvider<BaseModelData> name();
    }


    interface StateProperties extends PropertyAccess<BaseModelData> {
    ModelKeyProvider<BaseModelData> abbr();


    LabelProvider<BaseModelData> name();
    }


    interface MyUiBinder extends
    UiBinder<Widget, HorizontalLayoutUiBinderExample> {
    }


    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
    @UiField
    HorizontalLayoutContainer container;


    public Widget asWidget() {
    Widget widget = uiBinder.createAndBindUi(this);
    StateProperties props = GWT.create(StateProperties.class);
    ListStore<BaseModelData> states = new ListStore<BaseModelData>(
    props.abbr());


    ComboBox<BaseModelData> combo = new ComboBox<BaseModelData>(states,
    props.name());
    combo.setEmptyText("Select a state...");
    combo.setWidth(150);
    combo.setTypeAhead(true);
    combo.setTriggerAction(TriggerAction.ALL);
    container.add(combo);


    states = new ListStore<BaseModelData>(props.abbr());
    combo.setEmptyText("Select a state...");
    combo.setWidth(150);
    combo.setTypeAhead(true);
    combo.setTriggerAction(TriggerAction.ALL);


    final FieldLabel label = new FieldLabel(combo, "label1");
    label.setLabelAlign(LabelAlign.LEFT);
    container.add(label);


    final CountryProperties countryProps = GWT
    .create(CountryProperties.class);


    ListStore<BaseModelData> countries = new ListStore<BaseModelData>(
    countryProps.abbr());


    ComboBox<BaseModelData> combo2 = new ComboBox<BaseModelData>(countries,
    countryProps.name());
    combo2.setWidth(150);
    combo2.setTypeAhead(true);
    combo2.setTriggerAction(TriggerAction.ALL);


    final FieldLabel label2 = new FieldLabel(combo2, "label2");
    label.setLabelAlign(LabelAlign.LEFT);
    container.add(label2);


    Button button = new Button("click me");
    button.addClickHandler(new ClickHandler() {


    @Override
    public void onClick(ClickEvent event) {


    final CountryProperties countryProps = GWT
    .create(CountryProperties.class);


    ListStore<BaseModelData> countries = new ListStore<BaseModelData>(
    countryProps.abbr());


    ComboBox<BaseModelData> combo3 = new ComboBox<BaseModelData>(
    countries, countryProps.name());
    combo3.setWidth(150);
    combo3.setTypeAhead(true);
    combo3.setTriggerAction(TriggerAction.ALL);


    final FieldLabel label3 = new FieldLabel(combo3, "label3");
    label.setLabelAlign(LabelAlign.LEFT);
    container.add(label3);
    }


    });
    container.add(button);


    return widget;
    }


    public void onModuleLoad() {
    RootPanel.get().add(asWidget());
    }


    }


    And of course the UiBinder:

    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:row="urn:import:com.sencha.gxt.widget.core.client.container">


    <row:VerticalLayoutContainer borders="true">
    <row:HorizontalLayoutContainer ui:field="container"
    height="40" width="1000" borders="true"></row:HorizontalLayoutContainer>
    </row:VerticalLayoutContainer>
    </ui:UiBinder>

  4. #4
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    You are missing a call to forceLayout after adding the item

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    jgates0 is on a distinguished road

      0  

    Default


    That works, thanks for your help.

  6. #6
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Quote Originally Posted by jgates0 View Post
    That works, thanks for your help.
    I am closing this thread than.

Thread Participants: 1