Access values on widgets and send to server

Question

I have an interface created from GXT 2.2.5 library, now I need to get user entered values from TextField and send it to server. How can i get this user entered values from textfield? Here the sample code:

package kz.bimash.client;

import com.extjs.gxt.ui.client.widget.LayoutContainer;

import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Slider;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.extjs.gxt.ui.client.widget.layout.FormLayout;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.Element;

public class Form extends LayoutContainer {

private VerticalPanel vp;

private FormData formData;

@Override
protected void onRender(Element parent, int index) {
    super.onRender(parent, index);
    formData = new FormData("-20");
    vp = new VerticalPanel();
    vp.ensureDebugId("vps");
    vp.setSpacing(10);
    //createForm1();
    createForm2();
    add(vp);
}



private void createForm2() {
    FormPanel form2 = new FormPanel();
    form2.ensureDebugId("pan");
    form2.setFrame(true);
    form2.setHeading("Simple Form with FieldSets");
    form2.setWidth(350);
    form2.setLayout(new FlowLayout());

    FieldSet fieldSet = new FieldSet();
    fieldSet.setHeading("User Information");
    fieldSet.setCheckboxToggle(true);

    FormLayout layout = new FormLayout();
    layout.setLabelWidth(75);
    fieldSet.setLayout(layout);

    TextField<String> firstName = new TextField<String>();

    firstName.setFieldLabel("First Name");
    firstName.ensureDebugId("firstName");
    firstName.setValue("olzheke");
    firstName.setAllowBlank(false);
    fieldSet.add(firstName, formData);

    TextField<String> lastName = new TextField<String>();
    lastName.setFieldLabel("Last Name");
    lastName.setValue(firstName.getItemId());
    fieldSet.add(lastName, formData);

    TextField<String> company = new TextField<String>();
    company.setFieldLabel("Company");
    fieldSet.add(company, formData);

    TextField<String> email = new TextField<String>();
    email.setFieldLabel("Email");
    fieldSet.add(email, formData);

    form2.add(fieldSet);
    fieldSet = new FieldSet();
    fieldSet.setHeading("Phone Numbers");
    fieldSet.setCollapsible(true);

    layout = new FormLayout();
    layout.setLabelWidth(75);
    fieldSet.setLayout(layout);

    TextField<String> field = new TextField<String>();
    field.setFieldLabel("Home");
    fieldSet.add(field, formData);

    field = new TextField<String>();
    field.setFieldLabel("Business");
    fieldSet.add(field, formData);

    field = new TextField<String>();
    field.setFieldLabel("Mobile");
    fieldSet.add(field, formData);

    field = new TextField<String>();
    field.setFieldLabel("Fax");
    fieldSet.add(field, formData);

    form2.add(fieldSet);
    form2.setButtonAlign(HorizontalAlignment.CENTER);
    form2.addButton(new Button("Save"));
    form2.addButton(new Button("Cancel"));

    vp.add(form2);
}

}

Here is the EntryPoint implemented class, where i am going to send:

package kz.bimash.client;




import com.extjs.gxt.ui.client.widget.Document;
import com.extjs.gxt.ui.client.widget.MessageBox;

import com.extjs.gxt.ui.client.widget.form.FieldSet;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.extjs.gxt.ui.client.widget.layout.FormLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.*;


public class GWTSample implements EntryPoint {
private UserServiceAsync prox;
private HTML label1, button1;

public void onModuleLoad() {
    prox = GWT.create(UserService.class);
   // Window.enableScrolling(false);
  //  Window.setMargin("0px");
    Form form = new Form();

    form.setVisible(true);
  Button btn = new Button("Click me!");
   // final RootPanel root=RootPanel.get();
    final RootLayoutPanel root = RootLayoutPanel.get();

    btn.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            prox.getMsq(new AsyncCallback<String>() {
                @Override
                public void onFailure(Throwable caught) {
                  //To change body of implemented methods use File | Settings | File Templates.
                }

                @Override
                public void onSuccess(String result) {

                   // MessageBox.info("testing","this is ext gwt",null);
                }
            });
        }
    });

    TextField<String> tf = (TextField<String>) form.getItemByItemId("firstName");
    Label lab = new Label();
    //lab.setText(tf.getValue());
   // root.add(lab);
    root.get().add(form);

    root.get().add(btn);
    //Document.get().getElementByID()
}

}

when the button is clicked i need to retreive values from Texfield and send it to server, how can i access those values?

Answer 1

why don't you just make a method in your Form class?

public class Form extends LayoutContainer {

    TextField<String> firstName;

    public String getFirstName(){
      return firstName.getValue();
    }
  ...
}

Then in onModuleLoad()

public void onModuleLoad() {
    ...
    final Form form = new Form();

    ...

    btn.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) { 
            String firstName =form.getFirstName();
         }
      ...
    }
}

Answer 2

Declare your tf on Top (global variable) TextField<String> tf ;

Later assign the value

tf = (TextField<String>) form.getItemByItemId("firstName");

on Button Click Handler :

 btn.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
        String value =tf.getValue();
.......