PDA

View Full Version : [FIXED] FieldSet layout (re-size) bug



robferguson
29 Feb 2012, 6:10 PM
Hi,

Following on from this post:

http://www.sencha.com/forum/showthread.php?183869-Forms-and-form-fields-field-sets-and-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
1 Mar 2012, 2:07 AM
Can confirm this problem.

sven
1 Mar 2012, 2:19 AM
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/#ExamplePlace:formsexample uses a fieldset and the children are resized.

gishmo
1 Mar 2012, 12:05 PM
Hi Sven,
will try to create a sample project.
May be it is because it is inside a TabPanel.
Frank

robferguson
1 Mar 2012, 12:47 PM
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/source/browse/#svn%2Ftrunk%2Fgwtcx%2Fgwtcx-core%2Fgwtcx-core-client-extgwt%2Fsrc%2Fmain%2Fjava%2Fcom%2Fgwtcx%2Fextgwt%2Fclient%2Fview%2Fcontact%3Fstate%3Dclosed

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

- http://www.sencha.com/examples-dev/#...e:formsexample (http://www.sencha.com/examples-dev/#ExamplePlace: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
1 Mar 2012, 11:28 PM
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
1 Mar 2012, 11:46 PM
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
2 Mar 2012, 12:33 AM
Sven, if you like to have the complete test project, I will upload it.

sven
2 Mar 2012, 12:33 AM
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
2 Mar 2012, 1:07 AM
After resizing the browser window, it looks like this:

32304

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

gishmo
2 Mar 2012, 1:29 AM
IE 8 also works fine!

sven
2 Mar 2012, 4:03 AM
Firefox was the required and totally missing information here.

gishmo
2 Mar 2012, 4:09 AM
That's right.
But before you told me, that it works in IE and Chrome I did not think, that it is a browser depending problem.
I will post the configuration the next time.

sven
2 Mar 2012, 4:19 AM
FieldSet does not size its container target, try this:

FieldSet fsAnschrift = new FieldSet(){
@Override
protected void onResize(int width, int height) {
super.onResize(width, height);

this.getContainerTarget().setWidth(width-this.getElement().getFrameWidth(Side.LEFT, Side.RIGHT), true);
}
};

The environment is always i required information.

gishmo
2 Mar 2012, 4:33 AM
Checked with FF7. It works! Thanks!

Will this be part of the next RC?

sven
2 Mar 2012, 4:40 AM
I opened a ticket for it. It will be fixed in one of the upcomming releases.

gishmo
2 Mar 2012, 5:41 AM
Thanks

robferguson
2 Mar 2012, 4:37 PM
Hi,

I have attached some screen shots that demonstrate the FieldSet layout bug.

When not using FieldSet's the parent layout container (HtmlLayoutContainer) is correctly laying out its children (child widgets) when the browser window is made larger and smaller.

If you use one or more FieldSet's the child widgets are not laid out correctly.

Browser: FF 8
O/S: Windows 7

However, Chrome 17.0.963.56 m works correctly as does IE 9.

Cheers
Rob

32346
323473234832349

darrellmeyer
12 Mar 2012, 6:06 PM
Fixed in SVN (rev 2331)

WesleyMoy
28 Mar 2012, 2:48 PM
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
16 Jul 2012, 7:52 AM
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.

37200

Thanks!

elirov
16 Jul 2012, 8:06 AM
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?