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.

[darrellmeyer]

Fixed in SVN (rev 2331)

[WesleyMoy]

This bug has been fixed in the Ext GWT 3.0 Release Candidate. Please upgrade your copy of Ext GWT and try your test case again. While we're confident that we've addressed this issue, please reply if you notice any continued problems after upgrading. Again, thanks for taking the time to report this bug.

[elirov]

I'm still having a problem with FieldSet in both Chrome and Firefox. Here's the code:

      FieldSet fs = new FieldSet();      fs.setHeadingText("Test");
      fs.add(new TextArea(), new MarginData(10));
      com.sencha.gxt.widget.core.client.Window w = new com.sencha.gxt.widget.core.client.Window();
      w.add(fs);
      w.setPixelSize(400, 400);
      w.show();

The text area should take up the entire fieldset size, but it takes up only two lines on top. Same thing happens when I add a button instead of a text area. It almost looks like it's adding a child and allowing the child to choose its own height instead of sizing the child to take up all the available space, like a SimpleContainer would do.

fieldset_bug.jpg

Thanks!

[elirov]

Is it possible that we're missing the following in the onResize() method in FieldSet?

getContainerTarget().setHeight(height - getElement().getFrameWidth(Side.TOP, Side.BOTTOM));

Is there a reason to only set the width and not the height of the container target?