Success! Looks like we've fixed this one. According to our records the fix was applied for a bug in our system in a recent build.
  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    21
    Vote Rating
    0
    robferguson is on a distinguished road

      0  

    Default FieldSet layout (re-size) bug

    FieldSet layout (re-size) bug


    Hi,

    Following on from this post:

    http://www.sencha.com/forum/showthre...nd-row-spacers

    I have a form that occupies the center panel of a BorderLayoutContainer. The form will size / re-size correctly without Ext GWT FieldSet's. However, once I add the Ext GWT FieldSet's to the form it no longer resize's correctly.

    However, it works as expected when using "<filedset>":

    Code:
      private native String getAddressInformationSectionTableMarkup() /*-{
        return [ '<fieldset>',
            '<legend>Address Information:</legend>',
            '<table width=100% cellpadding=0 cellspacing=0>',
            '<tr><td class=addressName width=50%></td><td class=postalCode width=50%></td></tr>',
            '<tr><td class=addressLine1></td><td class=country></td></tr>',
            '<tr><td class=addressLine2></td><td class=addressType></td></tr>',
            '<tr><td class=addressLine3></td><td></td></tr>',
            '<tr><td class=city></td><td></td></tr>',
            '<tr><td class=state></td><td></td></tr>',
            '</table>',
            '</fieldset>'
        ].join("");
      }-*/;
    Cheers
    Rob

    Code:
    public class ContactInformationView extends AbstractFormView<ContactInformationUiHandlers> implements
        ContactInformationPresenter.MyView {
    
      protected TabPanel tabPanel;
    
      protected VerticalLayoutContainer vLayout;
    
      protected FieldSet generalInformation;
      protected FieldSet addressInformation;
    
      protected HtmlLayoutContainer generalLayout;
      protected HtmlLayoutContainer addressLayout;
    
      @Inject
      public ContactInformationView(final EventBus eventBus, final TabPanel tabPanel) {
        super(eventBus);
    
        Log.debug("ContactInformationView()");
    
        this.tabPanel = tabPanel;
    
        getTabPanel().setWidth(CONTEXT_AREA_WIDTH);
        getForm().setWidget(getTabPanel());
    
        createGeneralInformationSection();
    
        createAddressInformationSection();
    
        vLayout = new VerticalLayoutContainer();
        vLayout.setLayoutData(new MarginData(DEFAULT_MARGIN));
    
        // vLayout.add(generalInformation, new VerticalLayoutData(1, -1));
        // vLayout.add(addressInformation, new VerticalLayoutData(1, -1));
    
        vLayout.add(generalLayout, new VerticalLayoutData(1, -1));
        vLayout.add(addressLayout, new VerticalLayoutData(1, -1));
    
        getTabPanel().add(vLayout, "General");
    
        // /*
    
        this.panel.addResizeHandler(new ResizeHandler() {
          @Override
          public void onResize(ResizeEvent event) {
    
            int width = event.getWidth();
            int height = event.getHeight();
    
            Log.debug("vLayout - width: " + width + " height: " + height);
    
            vLayout.setSize(width + "px", height + "px");
            // generalInformation.setWidth((width - DEFAULT_MARGIN * 5) + "px");
            // addressInformation.setWidth((width - DEFAULT_MARGIN * 5) + "px");
            // generalInformation.forceLayout();
            // addressInformation.forceLayout();
          }
        });
    
        // */
      }
    
      protected void createGeneralInformationSection() {
    
        generalInformation = new FieldSet();
        generalInformation.setHeadingText("General Information");
        generalInformation.setCollapsible(true);
    
        generalLayout = new HtmlLayoutContainer(getGeneralInformationSectionTableMarkup());
        generalLayout.setLayoutData(new MarginData(DEFAULT_MARGIN));
    
        new ContactInformationNameSection(generalLayout);
        new ContactInformationElectronicAddressSection(generalLayout);
    
        // generalInformation.add(generalLayout);
      }
    
      protected void createAddressInformationSection() {
    
        addressInformation = new FieldSet();
        addressInformation.setHeadingText("Address Information");
        addressInformation.setCollapsible(true);
    
        addressLayout = new HtmlLayoutContainer(getAddressInformationSectionTableMarkup());
        addressLayout.setLayoutData(new MarginData(DEFAULT_MARGIN));
    
        new ContactInformationAddressSection(addressLayout);
    
        // addressInformation.add(addressLayout);
      }
    
      private native String getGeneralInformationSectionTableMarkup() /*-{
        return [ '<table width=100% cellpadding=0 cellspacing=0>',
            '<tr><td class=salutation width=50%></td><td class=businessPhone width=50%></td></tr>',
            '<tr><td class=givenName></td><td class=homePhone></td></tr>',
            '<tr><td class=middleName></td><td class=mobilePhone></td></tr>',
            '<tr><td class=familyName></td><td class=fax></td></tr>', '</table>'
        ].join("");
      }-*/;
    
      private native String getAddressInformationSectionTableMarkup() /*-{
        return [ '<fieldset>',
            '<legend>Address Information:</legend>',
            '<table width=100% cellpadding=0 cellspacing=0>',
            '<tr><td class=addressName width=50%></td><td class=postalCode width=50%></td></tr>',
            '<tr><td class=addressLine1></td><td class=country></td></tr>',
            '<tr><td class=addressLine2></td><td class=addressType></td></tr>',
            '<tr><td class=addressLine3></td><td></td></tr>',
            '<tr><td class=city></td><td></td></tr>',
            '<tr><td class=state></td><td></td></tr>',
            '</table>',
            '</fieldset>'
        ].join("");
      }-*/;
    Attached Images

  2. #2
    Ext GWT Premium Member
    Join Date
    Aug 2010
    Location
    Germany, Solingen
    Posts
    243
    Vote Rating
    2
    gishmo is on a distinguished road

      0  

    Default


    Can confirm this problem.

  3. #3
    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


    I cannot follow that code. You commented out all uses of the GXT fieldset in that code.

    Can you please provide all fully working testcase implementing EntryPoint that shows this?

    http://www.sencha.com/examples-dev/#...e:formsexample uses a fieldset and the children are resized.

  4. #4
    Ext GWT Premium Member
    Join Date
    Aug 2010
    Location
    Germany, Solingen
    Posts
    243
    Vote Rating
    2
    gishmo is on a distinguished road

      0  

    Default


    Hi Sven,
    will try to create a sample project.
    May be it is because it is inside a TabPanel.
    Frank

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    21
    Vote Rating
    0
    robferguson is on a distinguished road

      0  

    Default


    Hi,

    -> I cannot follow that code. You commented out all uses of the GXT fieldset in that code.

    Ok, its a View implementation built using GWTP. I tried various options to try and locate the problem - that's why the FieldSet code is commented out.

    I have a form that occupies the center panel of a BorderLayoutContainer. The form will size / re-size correctly without Ext GWT FieldSet's. However, once I add the Ext GWT FieldSet's to the form it no longer resize's correctly.

    However, it works as expected (re-sizes correctly) when using "<fieldset>":

    - Can you please provide all fully working testcase implementing EntryPoint that shows this?

    The source for the sample is here:

    -> http://code.google.com/p/gwt-cx/source/checkout

    -> http://code.google.com/p/gwt-cx/sour...state%3Dclosed

    Take a look at the ContactInformationView and the ContactInformationAddressSection and the ContactInformationAddressSection.

    - http://www.sencha.com/examples-dev/#...e:formsexample uses a fieldset and the children are resized.

    Yes, however the sample uses a VerticalLayoutContainer and not a HtmlLayoutContainer (I have a multi-column form) and the form in the sample does not re-size. Its a re-sizing bug.

    Note: There's a demo of a Smart GWT version of a similar (double-click on Accounts) form here:

    -> http://gwt-cx.com/serendipity/Serendipity.html

    I haven't completed the Ext GWT demo.

    Cheers
    Rob

  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


    HtmlLayoutContainer does not resize its children. This means you need to resize them manually, like the FieldSet widget you put into the there.

    I do not see any bug here.

  7. #7
    Ext GWT Premium Member
    Join Date
    Aug 2010
    Location
    Germany, Solingen
    Posts
    243
    Vote Rating
    2
    gishmo is on a distinguished road

      0  

    Default


    Hi Sven,

    please try this code (testet with beta 4):

    Code:
    package de.gishmo.twofieldsetresize.client;
    
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.Label;
    import com.google.gwt.user.client.ui.RootLayoutPanel;
    import com.google.gwt.user.client.ui.Widget;
    import com.sencha.gxt.core.client.util.Margins;
    import com.sencha.gxt.widget.core.client.ContentPanel;
    import com.sencha.gxt.widget.core.client.TabItemConfig;
    import com.sencha.gxt.widget.core.client.TabPanel;
    import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer;
    import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData;
    import com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer;
    import com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer.HorizontalLayoutData;
    import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
    import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
    import com.sencha.gxt.widget.core.client.container.Viewport;
    import com.sencha.gxt.widget.core.client.form.FieldLabel;
    import com.sencha.gxt.widget.core.client.form.FieldSet;
    import com.sencha.gxt.widget.core.client.form.FormPanel;
    import com.sencha.gxt.widget.core.client.form.TextField;
    
    
    /**
     * Entry point classes define <code>onModuleLoad()</code>.
     */
    public class TwoFieldSetsResize implements EntryPoint {
    
    
    
    
        /**
         * This is the entry point method.
         */
        public void onModuleLoad() {
            BorderLayoutContainer rootPanel = new BorderLayoutContainer();
            rootPanel.setBorders(true);
            rootPanel.setSize("100%", "100%");
    
    
            ContentPanel cpNorth = new ContentPanel();
            cpNorth.setHeadingText("Header");
            cpNorth.add(new Label("Test Fieldset Resize"));
            BorderLayoutData dataNorth = new BorderLayoutData(64);
            dataNorth.setMargins(new Margins(2, 2, 2, 2));
            rootPanel.setNorthWidget(cpNorth, dataNorth);
    
    
            ContentPanel cpWest = new ContentPanel();
            cpWest.setHeadingText("Navigation");
            cpWest.add(new Label("West"));
            BorderLayoutData dataWest = new BorderLayoutData(128);
            dataWest.setMargins(new Margins(2, 2, 2, 2));
            rootPanel.setWestWidget(cpWest, dataWest);
            
            BorderLayoutData dataCenter = new BorderLayoutData();
            dataCenter.setMargins(new Margins(2, 2, 2, 2));
            rootPanel.setCenterWidget(this.asWidget(), dataCenter);
    
    
            Viewport viewport = new Viewport();
            viewport.add(rootPanel);
            
            RootLayoutPanel.get().add(viewport);
        }
        
        private Widget asWidget() {
            // Center-Panel
            ContentPanel contentPanel = new ContentPanel();
            contentPanel.setHeadingText("Center");
            contentPanel.setBorders(false);
            contentPanel.setBodyBorder(false);
    
    
            // Tab-Panel
            TabPanel tabPanel = new TabPanel();
            tabPanel.setBorders(false);
            tabPanel.setBodyBorder(true);
            tabPanel.setTabScroll(true);
            // Portal-Tab (immer vorhanden)
            TabItemConfig tab01 = new TabItemConfig("Tab 01");
            tab01.setClosable(false);
            tab01.setEnabled(true);
            tabPanel.add(this.buildForms(), tab01);
    
    
            contentPanel.add(tabPanel);
    
    
            return contentPanel;
        }
    
    
        private FormPanel buildForms() {
            HorizontalLayoutContainer fieldContainer = new HorizontalLayoutContainer();
    
    
            
            VerticalLayoutContainer fieldContainerLeft = new VerticalLayoutContainer();
            fieldContainerLeft.setBorders(false);
    
    
            FieldSet fsAnschrift = new FieldSet();
            fsAnschrift.setCollapsible(false);
            fsAnschrift.setHeadingText("Anschrift");
            fieldContainerLeft.add(fsAnschrift, new VerticalLayoutData(1, -1));
            // VerticalPanel fuer die Fields im Fieldset
            VerticalLayoutContainer fcAnschrift = new VerticalLayoutContainer();
            fcAnschrift.setBorders(false);
            // Felder
            fcAnschrift.add(new FieldLabel(new TextField(), "Name"), new VerticalLayoutData(1, -1));  
            fcAnschrift.add(new FieldLabel(new TextField(), "Plz"), new VerticalLayoutData(1, -1));  
            fcAnschrift.add(new FieldLabel(new TextField(), "Ort"), new VerticalLayoutData(1, -1));  
            // FieldSet fuellen ... 
            fsAnschrift.add(fcAnschrift);
    
    
    
    
            VerticalLayoutContainer fieldContainerRight = new VerticalLayoutContainer();
            fieldContainerRight.setBorders(false);
                
            FieldSet fsKategorie = new FieldSet();
            fsKategorie.setCollapsible(false);
            fsKategorie.setHeadingText("Kategorie");
            fieldContainerRight.add(fsKategorie, new VerticalLayoutData(1, -1));
            // VerticalPanel fuer die Fields im Fieldset
            VerticalLayoutContainer fcKategorie = new VerticalLayoutContainer();
            fcKategorie.setBorders(false);
            // Felder
            fcKategorie.add(new FieldLabel(new TextField(), "Art"), new VerticalLayoutData(1, -1));  
            fcKategorie.add(new FieldLabel(new TextField(), "Status"), new VerticalLayoutData(1, -1));  
            fcKategorie.add(new FieldLabel(new TextField(), "Referenz"), new VerticalLayoutData(1, -1));  
            // FieldSet fuellen ... 
            fsKategorie.add(fcKategorie);
    
    
            fieldContainer.add(fieldContainerLeft, new HorizontalLayoutData(.5d, -1, new Margins(4, 4, 4, 4)));
            fieldContainer.add(fieldContainerRight, new HorizontalLayoutData(.5d, -1, new Margins(4, 8, 0, 4)));
    
    
            
            // Fuer die Farbe
            BorderLayoutContainer bc = new BorderLayoutContainer();
            bc.setSize("100%", "100%");
            BorderLayoutData bcCenter = new BorderLayoutData();
            bcCenter.setMargins(new Margins(0));
            bc.setCenterWidget(fieldContainer, bcCenter);
    
    
            
            FormPanel formPanel = new FormPanel();
            formPanel.add(bc);
            
            return formPanel;
        }
    }
    Are HorizontalLayoutContainer also do not resize there children?

    if yes, which container should be used?
    Or, how can we resize it?

  8. #8
    Ext GWT Premium Member
    Join Date
    Aug 2010
    Location
    Germany, Solingen
    Posts
    243
    Vote Rating
    2
    gishmo is on a distinguished road

      0  

    Default


    Sven, if you like to have the complete test project, I will upload it.

  9. #9
    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


    What exactly does not work in that example?

    I run it in IE9 and Chrome and the fieldset as well as the fields are resizing.

  10. #10
    Ext GWT Premium Member
    Join Date
    Aug 2010
    Location
    Germany, Solingen
    Posts
    243
    Vote Rating
    2
    gishmo is on a distinguished road

      0  

    Default


    After resizing the browser window, it looks like this:

    resizeError.jpg

    This happens in FF 7 on Windows XP and also on OS X with FF 10.