Ext Js 4: Merging store data

31 Jan, 2012 Uncategorized

In a project I’ve been working on I needed to get a bunch of different stores of data and then have a separate store that would contain all of them combined. This was to save on ajax calls. I couldn’t find anything as far as native methods that would merge stores but I did come up with a solution.

var emptyArr = [];
 
var aggregatedStore = new Ext.data.ArrayStore({
		data: emptyArr,	
		fields: [{name: 'field1'},{name: 'field2'}]
	});
var singularStore = new Ext.data.JsonStore({
		autoload:true,
		proxy: {
			type: 'ajax',
			url: '/getDataPlease',
			reader: {
				type: 'json',
				root: 'fieldRoot'
			}
		},
		fields: [{name: 'field1'},{name: 'field2'}]
 
	});

So what I want to do here is push the contents of singularStore into aggregatedStore. What I ended up doing is adding a listener on singularStore load to accomplish this:

var emptyArr = [];
 
var aggregatedStore = new Ext.data.ArrayStore({
		data: emptyArr,	
		fields: [{name: 'field1'},{name: 'field2'}]
	});
var singularStore = new Ext.data.JsonStore({
		autoload:true,
		proxy: {
			type: 'ajax',
			url: '/getDataPlease',
			reader: {
				type: 'json',
				root: 'fieldRoot'
			}
		},
		fields: [{name: 'field1'},{name: 'field2'}],
                listeners: {
			'load': function(store, records, successful) {
				aggregatedStore.loadData(records,true);
			}
		}
 
	});

Now I can use singularStore to get just the data from that url. I can then add that load listener to any other store and use aggregatedStore to show the combined data.

Server Side Guy