PDA

View Full Version : Forms and form fields, field sets and row spacers



robferguson
27 Feb 2012, 8:29 PM
Hi,

I have been trying out Ext GWT's form and form field support. I've tried a few combinations including a form in the center panel of a BorderLayoutContainer. And I have just noticed that the form will re-size larger correctly but not smaller?


public class ContactInformationView extends AbstractFormView<ContactInformationUiHandlers> implements
ContactInformationPresenter.MyView {

protected TabPanel tabPanel;

@Inject
public ContactInformationView(final EventBus eventBus, final TabPanel tabPanel) {
super(eventBus);

this.tabPanel = tabPanel;

getTabPanel().setWidth(CONTEXT_AREA_WIDTH);
getForm().setWidget(tabPanel);

// General Information - FieldSet

FieldSet generalInformation = new FieldSet();
generalInformation.setHeadingText("General Information");
generalInformation.setCollapsible(true);

HtmlLayoutContainer generalLayout = new HtmlLayoutContainer(getTableMarkup1());
generalLayout.setSize(CONTEXT_AREA_WIDTH, CONTEXT_AREA_HEIGHT);
generalLayout.setLayoutData(new MarginData(8));

new ContactInformationNameSection(generalLayout);
new ContactInformationElectronicAddressSection(generalLayout);

generalInformation.add(generalLayout);

// Address Information - FieldSet

FieldSet addressInformation = new FieldSet();
addressInformation.setHeadingText("Address Information");
addressInformation.setCollapsible(true);

HtmlLayoutContainer addressLayout = new HtmlLayoutContainer(getTableMarkup2());
addressLayout.setSize(CONTEXT_AREA_WIDTH, CONTEXT_AREA_HEIGHT);
addressLayout.setLayoutData(new MarginData(8));

new ContactInformationAddressSection(addressLayout);

addressInformation.add(addressLayout);

VerticalLayoutContainer vLayout = new VerticalLayoutContainer();
vLayout.setLayoutData(new MarginData(8));
vLayout.add(generalInformation, new VerticalLayoutData(1, -1));
vLayout.add(addressInformation, new VerticalLayoutData(1, -1));

getTabPanel().add(vLayout, "General");
}

private native String getTableMarkup1() /*-{
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 getTableMarkup2() /*-{
return [ '<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>'
].join("");
}-*/;

Also, is there a row spacer? I tried the following markup, however, the city and state fields aren't rendered?


private native String getTableMarkup2() /*-{
return [ '<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>'
].join("");
}-*/;

Cheers
Rob

32184