MultiField with custom layout

[lkoe]

I've create a MultiField derivative with the ability to layout child fields using a custom layout.
Code see attachement, attached is also an example to show the some of the layouting possibilities.

Is there a possibility that something like that could make it into GXT?

Have fun...

[lkoe]

Usage example:



final FormData formData = new FormData("-20");

txtIsoCode = new TextField<String>();
txtIsoCode.setWidth(40);

txtIso3Code = new TextField<String>();
txtIso3Code.setWidth(40);

HBoxLayout layout = new HBoxLayout();
layout.setHBoxLayoutAlign(HBoxLayoutAlign.MIDDLE);

final HBoxLayoutData flex = new HBoxLayoutData();
flex.setFlex(1);

final CustomLayoutMultiField<TextField<String>> iscCodesMultiField = new CustomLayoutMultiField<TextField<String>>();
iscCodesMultiField.setFieldLabel("Country ISO codes");
iscCodesMultiField.setLayout(layout);
iscCodesMultiField.add(new LabelField("3166-1 alpha-2"));
iscCodesMultiField.add(txtIsoCode, new HBoxLayoutData(0, 0, 0, 3));
iscCodesMultiField.add(new LabelField(""), flex);
iscCodesMultiField.add(new LabelField("3166-1 alpha-3"));
iscCodesMultiField.add(txtIso3Code, new HBoxLayoutData(0, 20, 0, 3));

editCountryFormPanel.add(iscCodesMultiField, formData);

[gonzalez]

Can you provide the full example? I would like to put Buttons into a line with text fields.

Regards,
Gonzalez

[lkoe]

Here you go:

editCountryFormPanel = new FormPanel();
editCountryFormPanel.setWidth(600);
editCountryFormPanel.setVisible(false);
editCountryFormPanel.setFrame(true);
final FormLayout l = new FormLayout();
editCountryFormPanel.setLayout(l);
l.setLabelWidth(150);
l.setDefaultWidth(350);

final FormData formData = new FormData("-20");

txtIsoCode = new TextField<String>();
txtIsoCode.setWidth(40);

txtIso3Code = new TextField<String>();
txtIso3Code.setWidth(40);

HBoxLayout layout = new HBoxLayout();
layout.setHBoxLayoutAlign(HBoxLayoutAlign.MIDDLE);

final HBoxLayoutData flex = new HBoxLayoutData();
flex.setFlex(1);

final CustomLayoutMultiField<TextField<String>> iscCodesMultiField = new CustomLayoutMultiField<TextField<String>>();
iscCodesMultiField.setFieldLabel("Country ISO codes");
iscCodesMultiField.setLayout(layout);
iscCodesMultiField.add(new LabelField("3166-1 alpha-2"));
iscCodesMultiField.add(txtIsoCode, new HBoxLayoutData(0, 0, 0, 3));
iscCodesMultiField.add(new LabelField(""), flex);
iscCodesMultiField.add(new LabelField("3166-1 alpha-3"));
iscCodesMultiField.add(txtIso3Code, new HBoxLayoutData(0, 20, 0, 3));

editCountryFormPanel.add(iscCodesMultiField, formData);

txtName = new TextField<String>();
txtName.setFieldLabel("Name");
editCountryFormPanel.add(txtName, formData);

txtCurrencyIsoCode = new TextField<String>();
txtCurrencyIsoCode.setFieldLabel("Currency code");
editCountryFormPanel.add(txtCurrencyIsoCode, formData);

txtDefaultOrg = new TextField<String>();
txtDefaultOrg.setEnabled(false);
btnSelectDefaultOrg = new Button("Select...");
btnClearDefaultOrg = new Button("Clear");

chkAllowsForImts = new CheckBox();
chkAllowsForImts.setBoxLabel("Allows for IOs");

final CustomLayoutMultiField<TextField<String>> defaultOrgMultiField = new CustomLayoutMultiField<TextField<String>>();
defaultOrgMultiField.setFieldLabel("Default organisation");
layout = new HBoxLayout();
layout.setHBoxLayoutAlign(HBoxLayoutAlign.MIDDLE);

defaultOrgMultiField.setLayout(layout);
defaultOrgMultiField.add(txtDefaultOrg, flex);
defaultOrgMultiField.add(new AdapterField(btnSelectDefaultOrg));
defaultOrgMultiField.add(new AdapterField(btnClearDefaultOrg), new HBoxLayoutData(0, 10, 0, 0));
defaultOrgMultiField.add(chkAllowsForImts, new HBoxLayoutData(0, 20, 0, 0));
editCountryFormPanel.add(defaultOrgMultiField, formData);

txtPhonePrefix = new NumberField();
txtPhonePrefix.setMessageTarget("tooltip");
txtPhonePrefix.setWidth(40);
txtPhonePrefix.setPropertyEditorType(Integer.class);

txtPhoneTrunk = new NumberField();
txtPhoneTrunk.setWidth(20);
txtPhoneTrunk.setPropertyEditorType(Integer.class);

final CustomLayoutMultiField<TextField<String>> phoneConfMultiField = new CustomLayoutMultiField<TextField<String>>();
phoneConfMultiField.setFieldLabel("Phone configuration");
layout = new HBoxLayout();
layout.setHBoxLayoutAlign(HBoxLayoutAlign.MIDDLE);

phoneConfMultiField.setLayout(layout);
phoneConfMultiField.add(new LabelField("+"));
phoneConfMultiField.add(txtPhonePrefix, new HBoxLayoutData(0, 3, 0, 0));
phoneConfMultiField.add(new LabelField("("), new HBoxLayoutData(0, 0, 0, 0));
phoneConfMultiField.add(txtPhoneTrunk);
phoneConfMultiField.add(new LabelField(") 1234567"));

editCountryFormPanel.add(phoneConfMultiField, formData);

saveButton = new Button("Save", AbstractImagePrototype.create(MudClientBundle.INSTANCE.saveIcon()));
editCountryFormPanel.addButton(saveButton);

cancelButton = new Button("Cancel");
editCountryFormPanel.addButton(cancelButton);

editCountryFormPanel.setButtonAlign(HorizontalAlignment.CENTER);

final FormButtonBinding binding = new FormButtonBinding(editCountryFormPanel);
binding.addButton(saveButton);
editCountryFormPanel.getButtonBar().setAutoWidth(true);
editCountryFormPanel.getButtonBar().setEnableOverflow(false);