Ext Js 4: Merging store data

January 31, 2012

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.

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive