Results 1 to 4 of 4

Thread: MultiField with custom layout

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    3

    Default MultiField with custom layout

    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...
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    Sencha User
    Join Date
    Mar 2010
    Posts
    3

    Default

    Usage example:

    Code:
          
    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);

  3. #3
    Sencha User
    Join Date
    Mar 2009
    Posts
    16

    Default

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

    Regards,
    Gonzalez

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    3

    Default

    Here you go:
    Code:
           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);

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •