[FIXED] Beta 2: Field.setName() is not related to Field.getName()

[dangeruss]

I've noticed my forms quit working when I updated to beta 2...

In field.class:

  /**
   * Returns the name attribute of the field if available.
   * 
   * @return the field name
   */
  public String getName() {
    return rendered ? getInputEl().getElementAttribute("name") : name;
  }

/**
   * Sets the field's HTML name attribute.
   * 
   * @param name the name
   */
  public void setName(String name) {
    this.name = name;
  }

I'm using name to hold the variable name the field is storing (variable name meaning database column name, in my case). Is the name supposed to be a "HTML name attribute", or it supposed to be how I'm using it, or are they the same?

At any rate, getName() & setName() don't appear to be related?

What I was really looking for was something like the ComboBox.setValueField() or setDisplayField(), whatever made sense for a TextField.

[gslender]

what about setData ?

[dangeruss]

what about setData ?

good call... i assumed that was for some other use i hadn't encountered, instead of generic use

[darrellmeyer]

setName should be updating the input element name attribute if field is rendered at time of call. Fix is in SVN.

setData will work for you as well. thanks gs.

[EvilTed]

This isn't very useful.

The name of a field needs to persist regardless of whether the form is currently rendered.
Try switching tabs for example.
The values remain but the names get wiped.

I think this bug is still open in 1.0.2

If you take your TabPanelForm sample as an example, the names are not retained as the user clicks the tabs.
This makes it impossible to retrieve the name value pairs for form submission.

Here is the code:

import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.TabPanelEvent;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.Field;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.layout.FormLayout;

import java.util.List;


public class TestPanel extends LayoutContainer {
    public TestPanel() {
        setLayout(new FlowLayout(10));

        final FormPanel panel = new FormPanel();
        panel.setFrame(false);
        panel.setHeaderVisible(false);
        panel.setBodyBorder(false);
        panel.setButtonAlign(Style.HorizontalAlignment.CENTER);
        panel.setLayout(new FitLayout());

        TabPanel tabs = new TabPanel();

        TabItem personal = new TabItem();
        personal.setText("Personal Details");
        personal.setLayout(new FormLayout());

        TextField<String> name = new TextField<String>();
        name.setFieldLabel("First Name");
        name.setName("firstname");
        name.setValue("Darrell");
        personal.add(name);

        TextField<String> last = new TextField<String>();
        last.setFieldLabel("Last Name");
        last.setName("lastname");
        last.setValue("Meyer");
        personal.add(last);

        TextField<String> company = new TextField<String>();
        company.setFieldLabel("Company");
        company.setName("company");
        personal.add(company);

        TextField<String> email = new TextField<String>();
        email.setFieldLabel("Email");
        email.setName("email");
        personal.add(email);

        tabs.add(personal);

        TabItem numbers = new TabItem();
        numbers.setText("Phone Numbers");

        numbers.setLayout(new FormLayout());

        TextField<String> home = new TextField<String>();
        home.setFieldLabel("Home");
        home.setName("numbers");
        home.setValue("800-555-1212");
        numbers.add(home);

        TextField<String> business = new TextField<String>();
        business.setFieldLabel("Business");
        business.setName("business");
        numbers.add(business);

        TextField<String> mobile = new TextField<String>();
        mobile.setFieldLabel("Mobile");
        mobile.setName("mobile");
        numbers.add(mobile);

        TextField<String> fax = new TextField<String>();
        fax.setFieldLabel("Fax");
        fax.setName("fax");
        numbers.add(fax);

        tabs.add(numbers);

        tabs.addListener(Events.Select,
            new Listener<TabPanelEvent>() {
                public void handleEvent(TabPanelEvent tpe) {
                    for (Field field : getFormFields()) {
                        System.out.println("name = " + field.getName() +
                            " value = " + field.getValue());
                    }
                }
            });

        panel.add(tabs);
        panel.addButton(new Button("Cancel"));
        panel.addButton(new Button("Submit"));

        panel.setSize(340, 180);

        add(panel);
    }

    private List<Field> getFormFields() {
        FormPanel form = (FormPanel) this.getItem(0);

        return form.getFields();
    }
}

It is easily fixed by having a local name variable in each Field object that the getName() returns.
Once cannot use the label name due to localization issues.
This method has nothing to do with whether the Field is currently rendered or not.

e.g.

private class MyTextField extends TextField {
        private String name;

        public MyTextField(final String name) {
             this.name = name;
        }

        public String getName() {
            return name;
        }
    }

ET

[darrellmeyer]

The name field is persisted independent of the field being rendered.

  /**
   * Returns the name attribute of the field if available.
   * 
   * @return the field name
   */
  public String getName() {
    return rendered ? getInputEl().dom.getAttribute("name") : name;
  }

  /**
   * Sets the field's HTML name attribute.
   * 
   * @param name the name
   */
  public void setName(String name) {
    this.name = name;
    if (rendered) {
      getInputEl().dom.setAttribute("name", name);
    }
  }

[kburns]

The Field.setName(String name) and Field.onRender(Element parent, int index) seem to persist the name property differently:

public void setName(String name) {
this.name = name;
if (rendered) {
  getInputEl().dom.setAttribute("name", name);
}
}
protected void onRender(Element parent, int index) {
 super.onRender(parent, index);
 
.
.
.
if (name != null) {
  getInputEl().dom.setPropertyString("name", name);
}
 
.
.
.
}

So if I call Field.setName(), then render the page, then call Field.getName(), I will receive "" on the getName call:

public String getName() {
 return rendered ? getInputEl().dom.getAttribute("name") : name;
}

I see this in looking at the Field class code for the 1.0.4 release.

Is this the intended behavior? I'm going to use the Component.setData("name", value) until this is fixed.

Thanks,

[darrellmeyer]

There was a bug. setAttribute should be used in onRender. Fix is in SVN.