FieldSet layout (re-size) bug

[robferguson]

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

  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

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("");
  }-*/;

[gishmo]

Can confirm this problem.

[sven]

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.

[gishmo]

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

[robferguson]

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

[sven]

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.

[gishmo]

Hi Sven,

please try this code (testet with beta 4):

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?

[gishmo]

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

[sven]

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.

[gishmo]

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.