ExtJS 4 problems with form updating a new created record in a store - loadRecord updateRecord

Question

I have problems with a form saving to a store. The form loads a record for editing a existing record, or is blank for a new record. Editing a existing record works fine. Creating a new one works fine as well. I get problems if I want to edit & update a newly created record without closing and re-opening the form.

I guess the problem is that the id of the record inside the store is assigned through the remote server. The form is holding a copy of the model and is not taking any notice of the changing id.

Any ideas how to keep the form and the store in sync?

The following code is used for saving:

var basicForm = this.up('form').getForm(),
record = basicForm.getRecord();

if (basicForm.isValid()) {

    if (!record) {
        record = Ext.data.StoreManager.lookup('theModel').add( this.up('form').getForm().getFieldValues())[0];
        basicForm.loadRecord(record);
    } else {
        basicForm.updateRecord(record);
    }
}

You can add a listener for the write event in the store and update the record id for the instance that you have in the form there. — VoidMain
Hey VoidMain, I thought about that too. ... var record = new app.model.newModel(basicForm.getFieldValues()); record.save({ success: function() { console.log(this) } }); ... unluckily I'm stil getting the old record not the new updated record with the assigned id — Manuel

VoidMain VoidMain · Accepted Answer · 2011-11-16T14:58:16

To continue with your example, you can listen for the write event on store:

var basicForm = this.up('form').getForm(),
record = basicForm.getRecord(), 
store = Ext.data.StoreManager.lookup('theModel'); // We'll add a field for simplicity
store.on('write', onTheModelWrite);

if (basicForm.isValid()) {

    if (!record) {
        record = Ext.data.StoreManager.lookup('theModel').add(this.up('form').getForm().getFieldValues())[0];
        basicForm.loadRecord(record);
    } else {
        basicForm.updateRecord(record);
    }
}

var onTheModelWrite = function(s, o)//Here Ext passes the store and the options passed to save()
{
    record = s.getAt( s.indexOf(record) ); //We use getAt() because we don't know the id
    basicForm.loadRecord(record);
}

You should put all this in scope, of course but, hopefully, you get the idea.

ExtJS 4 problems with form updating a new created record in a store - loadRecord updateRecord

1 Answers