PDA

View Full Version : Saving Model with Associated Data : Code Example Provided



jakejamessteele
13 Jul 2015, 5:09 PM
Hello Forums,

For the last few months I have been using an override to solve my problem, however I am sure there is a better way to go about the practice of saving grid data that uses associated stores.


Problem:
Grid column data is based on associated model data. I use the grid editor to save a model to the database through a rest request. That may include a new foreign key value (selected by a combobox).


RowEditing Plugin -> Edit Event -> Model.Save -> Returns Associated Data with Model -> Model does not save associated data.

The model save event happens in the RowEditing Edit event. It will send the Id and the new foreign key value.


PUT: {
id: 5,
travelTypeId: 6,
paymentTypeId: 3
}

which my server will then return:

Data: {
id: 5,
travelTypeId: 6,
travelType: {
id: 6,
name: 'International'
},
paymentTypeId: 3,
paymentType: {
id: 3,
name: 'Visa'
}
}

however the grid will continue to show the models old associated data instead of the new associated data. If you access the model you will see the associated data did not update at all.

My current solution is to override the Ext.data.Model with the code:


Ext.data.Model.override({


/**
* @Override
* Copies association data after calling super.copyFrom
*/
copyFrom: function (sourceRecord) {
this.callParent(arguments);
var associations = this.associations.items,
i, association, mine, theirs, instanceName;


for (i = 0; i < associations.length; i++) {
association = associations[i];
instanceName = association.instanceName;
theirs = sourceRecord[instanceName];
if (theirs) {
mine = this[instanceName];
if (mine) {
mine.copyFrom(theirs);
}
else {
this[instanceName] = theirs;
}
}
}
}


});


However you also need to then remember to refresh the view on the grid.

I was wondering what other people do in this situation to make sure their data visible to the client is quickly updated when the foreign key changes are saved to the server.

Jacob

Scorpie
29 Feb 2016, 3:40 PM
I have the same issue but with ExtJS 6....

mattjenkins
1 Dec 2017, 8:20 AM
Still an issue in 6.5.2.

vick_44
11 Jan 2018, 12:26 AM
This is a very old thread, donno why its opened after all this time!
anyways, here is possible solution if anyone happens to come across this post.

You have the json Data as response from your server, why not inject into the store?
I do it this way:
yourServerResponseData is the json data from server.
myGrid is the grid.
myGridStore is the store associated to the above grid.



var rowIndex = myGrid.find('id', yourServerResponseData.id);
var rowRecord = myGridStore.getAt(rowIndex);
rowRecord.set(yourServerResponseData);
rowRecord.commit();