Ext Js 4: Merging store data

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.