Results 1 to 2 of 2

Thread: Problem with setVisible

  1. #1

    Default Problem with setVisible

    I current use GXT 3.1

    When place a button and 2 FieldLabel in HorizontalLayoutContainer.

    If I set both FieldLabel visible="false" in ui.xml,
    and then use button to setVisible="true",
    the second FieldLabel will show up in wrong place.
    It will become correct after browser resize.

    If I set width in FieldLabel's layout data,
    it show up in right place, but child's width become strange.
    setVisible.png
    How to make it work?

    ui.xml
    Code:
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:b="urn:import:com.sencha.gxt.widget.core.client.button"
        xmlns:c="urn:import:com.sencha.gxt.widget.core.client.container"
        xmlns:f="urn:import:com.sencha.gxt.widget.core.client.form">
    
    
        <ui:with field="fieldRow" type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData">
            <ui:attributes width="1" height="30" />
        </ui:with>
        <ui:with field="fieldWithWidth" type="com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer.HorizontalLayoutData">
            <ui:attributes width="200" margins="{fieldMargins}" />
        </ui:with>
        <ui:with field="field" type="com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer.HorizontalLayoutData">
            <ui:attributes margins="{fieldMargins2}" />
        </ui:with>
        <ui:with field="fieldMargins" type="com.sencha.gxt.core.client.util.Margins">
            <ui:attributes top="5" right="35" bottom="5" left="5" />
        </ui:with>
        <ui:with field="fieldMargins2" type="com.sencha.gxt.core.client.util.Margins">
            <ui:attributes top="5" right="35" bottom="5" left="5" />
        </ui:with>
    
    
        <c:VerticalLayoutContainer>
            <c:HorizontalLayoutContainer layoutData="{fieldRow}">
                <b:TextButton ui:field="visibleBtn" text="Visible" />
            </c:HorizontalLayoutContainer>
            <c:HorizontalLayoutContainer layoutData="{fieldRow}">
                <f:FieldLabel text="Normal 1" layoutData="{field}">
                    <f:widget>
                        <f:TextField />
                    </f:widget>
                </f:FieldLabel>
                <f:FieldLabel text="Normal 2" layoutData="{field}">
                    <f:widget>
                        <f:TextField />
                    </f:widget>
                </f:FieldLabel>
            </c:HorizontalLayoutContainer>
            <c:HorizontalLayoutContainer layoutData="{fieldRow}">
                <f:FieldLabel ui:field="fooTest1" text="Visible False 1" layoutData="{field}" visible="false">
                    <f:widget>
                        <f:TextField />
                    </f:widget>
                </f:FieldLabel>
                <f:FieldLabel ui:field="fooTest2" text="Visible False 2" layoutData="{field}" visible="false">
                    <f:widget>
                        <f:TextField />
                    </f:widget>
                </f:FieldLabel>
            </c:HorizontalLayoutContainer>
            <c:HorizontalLayoutContainer layoutData="{fieldRow}">
                <f:FieldLabel text="Normal 1 with width 200" layoutData="{fieldWithWidth}">
                    <f:widget>
                        <f:TextField />
                    </f:widget>
                </f:FieldLabel>
                <f:FieldLabel text="Normal 2 with width 200" layoutData="{fieldWithWidth}">
                    <f:widget>
                        <f:TextField />
                    </f:widget>
                </f:FieldLabel>
            </c:HorizontalLayoutContainer>
            <c:HorizontalLayoutContainer layoutData="{fieldRow}">
                <f:FieldLabel ui:field="fooTest3" text="Visible False 1 with width 200" layoutData="{fieldWithWidth}" visible="false">
                    <f:widget>
                        <f:TextField />
                    </f:widget>
                </f:FieldLabel>
                <f:FieldLabel ui:field="fooTest4" text="Visible False 2 with width 200" layoutData="{fieldWithWidth}" visible="false">
                    <f:widget>
                        <f:TextField />
                    </f:widget>
                </f:FieldLabel>
            </c:HorizontalLayoutContainer>
        </c:VerticalLayoutContainer>
    </ui:UiBinder>
    VisibleTest.java
    Code:
    public class VisibleTest extends Composite{
        private static VisibleTestUiBinder uiBinder = GWT.create(VisibleTestUiBinder.class);
        interface VisibleTestUiBinder extends UiBinder<Widget, VisibleTest>{}
    
    
        @UiField FieldLabel fooTest1;
        @UiField FieldLabel fooTest2;
        @UiField FieldLabel fooTest3;
        @UiField FieldLabel fooTest4;
    
    
        public VisibleTest(){
            initWidget(uiBinder.createAndBindUi(this));
        }
    
    
        @UiHandler("visibleBtn")
        void onVisibleBtnSelect(SelectEvent se){
            fooTest1.setVisible(true);
            fooTest2.setVisible(true);
            fooTest3.setVisible(true);
            fooTest4.setVisible(true);
        }
    }

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Location
    Germany
    Posts
    223

    Default

    You may try a forceLayout() call on the FieldLabel(s) or their parent, just after toggling their visibility.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •