1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    3
    Vote Rating
    0
    gxtbeginner is on a distinguished road

      0  

    Default Databinding: Automatical updating a Label while writing in an input box

    Databinding: Automatical updating a Label while writing in an input box


    Hello everybody,

    I have a problem with the Editor Framework and Databinding!

    I want do the following:

    If I change the Value of a NumberField then the Value of a Label should automatically update.
    How can I make that work.
    I hope you can help me with that!

    Thanks for any help!

    Kind regards
    gxtbeginner

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    The Editor framework is about binding fields and editors to beans/POJOs, not to more widgets.

    Instead, think about just adding a handler to listen for key events, or to listen for ValueChangeEvents, depending on how often you want it to update.

    What are you trying to achieve in general? Is it important that the user can see the number they are typing in two different places at once, or is there something bigger going on here?

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    3
    Vote Rating
    0
    gxtbeginner is on a distinguished road

      0  

    Default


    I want to create a form with a lot of inputfields and some calculated fields which depends on the input.
    Can you explain me the best way to do that?

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    As with almost any interesting problem, there is more than one right way - picking a 'best' way means that you need to completely describe what you are trying to achieve.

    Have you tried ValueChangeEvents to monitor the changes of certain fields to update other displays?

    Have you looked at examples like http://staging.sencha.com:8080/examp...vegroupsummary where you can edit the Estimate and Rate values, and automatically see updates in the Cost column and the summary rows?

    What have you tried already?

  5. #5
    Sencha User
    Join Date
    Jan 2013
    Posts
    3
    Vote Rating
    0
    gxtbeginner is on a distinguished road

      0  

    Default


    So , here is an example.
    What I want is, that if I change the value of an inputfield (edit the value and press enter)the Label should be automatically updated. The formula of the Labels value is in the CalcDTO Class. Is there a way to do this automatically?

    Code:
    package de.globus.fma.client.main;import com.google.gwt.user.client.rpc.IsSerializable;
    public class CalcDTO implements IsSerializable {
     private long field1;
     private long field2;
     public CalcDTO() {
      super();
     }
     public CalcDTO(long value1, long value2) {
      this.field1 = value1;
      this.field2 = value2;
     }
     public long getField1() {
      return field1;
     }
     public void setField1(long field1) {
      this.field1 = field1;
     }
     public long getField2() {
      return field2;
     }
     public void setField2(long field2) {
      this.field2 = field2;
     }
     public String getResult() {
      return "" + (field1 * field2);
     }
    }
    Code:
    package de.globus.fma.client.main;import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.editor.client.Editor;
    import com.google.gwt.editor.client.SimpleBeanEditorDriver;
    import com.google.gwt.user.client.ui.Label;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
    import com.sencha.gxt.widget.core.client.form.NumberField;
    import com.sencha.gxt.widget.core.client.form.NumberPropertyEditor.LongPropertyEditor;
    
    public class CalcView implements EntryPoint, Editor<CalcDTO>{
     interface CalcDriver extends SimpleBeanEditorDriver<CalcDTO, CalcView> {}
     private CalcDriver driver;
     private CalcDTO calc;
     
     NumberField<Long> field1;
     NumberField<Long> field2;
     Label result;
     
     public void onModuleLoad() {
      driver = GWT.create(CalcDriver.class);
      
      calc = new CalcDTO(10,10);
      VerticalLayoutContainer vlc = new VerticalLayoutContainer();
      
      field1 = new NumberField<Long>(new LongPropertyEditor());
      field2 = new NumberField<Long>(new LongPropertyEditor());
      result = new Label();
      
      vlc.add(field1);
      vlc.add(field2);
      vlc.add(result);
      
      driver.initialize(this);
      driver.edit(calc);
      
      RootPanel.get().add(vlc);
     }
    }

Thread Participants: 1

Tags for this Thread