Extjs 4 : Sending updated models to server along with associations (has many)

Model- Association is one of the beautiful features of extjs4. Sencha documentation has plenty of examples on 'how to read association' but it doesn't have official documentation on 'how to update model along with its association' which is also a required feature most of the times.


Copy following code snippet in a javascript file and include it in your JSP/html page after extjs framework file inclusion.

<script type="text/javascript" src="extjs4/ext-all-dev.js"></script>
<script type="text/javascript" src="ext-model-assoc-override.js"></script>

Source : sencha forum topic.
Detailed example : http://stackoverflow.com/questions/9871440/extjs-store-hasmany-belongsto-and-update-process-howto

	Ext.data.writer.Json.override({
	/*
	* This function overrides the default implementation of json writer. Any hasMany relationships will be submitted
	* as nested objects. When preparing the data, only children which have been newly created, modified or marked for
	* deletion will be added. To do this, a depth first bottom -> up recursive technique was used.
	*/
	getRecordData: function(record) {
	//Setup variables
	var me = this, i, association, childStore, data = record.data;
	//Iterate over all the hasMany associations
	for (i = 0; i < record.associations.length; i++) {
	association = record.associations.get(i);
	data[association.name] = null;
	childStore = record[association.storeName];
	//Iterate over all the children in the current association
	childStore.each(function(childRecord) {
	if (!data[association.name]){
	data[association.name] = [];
	}
	//Recursively get the record data for children (depth first)
	var childData = this.getRecordData.call(this, childRecord);
	/*
	* If the child was marked dirty or phantom it must be added. If there was data returned that was neither
	* dirty or phantom, this means that the depth first recursion has detected that it has a child which is
	* either dirty or phantom. For this child to be put into the prepared data, it's parents must be in place whether
	* they were modified or not.
	*/
	if (childRecord.dirty | childRecord.phantom | (childData != null)){
	data[association.name].push(childData);
	record.setDirty();
	}
	}, me);
	/*
	* Iterate over all the removed records and add them to the preparedData. Set a flag on them to show that
	* they are to be deleted
	*/
	Ext.each(childStore.removed, function(removedChildRecord) {
	//Set a flag here to identify removed records
	removedChildRecord.set('forDeletion', true);
	var removedChildData = this.getRecordData.call(this, removedChildRecord);
	data[association.name].push(removedChildData);
	record.setDirty();
	}, me);
	}
	//Only return data if it was dirty, new or marked for deletion.
	if (record.dirty | record.phantom | record.get('forDeletion')){
	return data;
	}
	}
	});

view raw ext-model-assoc-override.js hosted with ❤ by GitHub

Note: Following code only works for has many associations. We need to extend this for has one, in case if we want it for has one associations.