ExtJS 4.2 Grid Form Binding (updaterecord on form edit)

Question

I have a grid that on selection binds the record to a form.

gridSelectionChange: function (model, records) {

        if (records[0]) {
            this.getFormdata().getForm().loadRecord(records[0]);
        }
    },

Everything works fine, but if I change any field value the grid is not updating the record and neither the datastore.

I have read that I have to call:

form.updateRecord();

But how can I call it on every lost of focus of my fields (textfield, combos, etc.)?

Is there a way to do the two way binding?

code4jhon code4jhon · Accepted Answer · 2014-05-31T14:57:08

You can see a working example under Ext JS 4 SDK examples/app/simple/simple.html It binds a grid to a form inside a window.

This is the code that do the trick:

    editUser: function(grid, record) {  // this function fires when dblClick on itemRow
        var edit = Ext.create('AM.view.user.Edit').show();   //creates a window a shows it

        edit.down('form').loadRecord(record);  //reference the form and load the record
    },

updateUser: function(button) {         //this function fires on save button of the form
    var win    = button.up('window'),  //get a reference to the window 
        form   = win.down('form'),     // get a reference to the form 
        record = form.getRecord(),     // get the form record
        values = form.getValues();     // get the values of the form

    record.set(values);                //set the values to the record (same object shared with the grid) 
    win.close();                      //close window
    this.getUsersStore().sync();      // this line is only necesary if you want to synchronize with the server
}

Bottom line do:

  var record = form.getRecord(),     
      values = form.getValues();     
      record.set(values);

ExtJS 4.2 Grid Form Binding (updaterecord on form edit)

1 Answers