View Full Version : how to combine results from 2 different URLs into a single store

29 Nov 2013, 8:55 AM
I have a grid, which has a JsonStore, loads data from a single URL.
Now, I have to change it, because that URL is no longer appropriate.
In fact that URL has been replaced by 2 different URLs.

What I have to do now is invoke both URL seperately, do some processing of the result data (cross-referencing and consistency-checking between both sets of results) and then combine the records into the the grid's store for display.

I have done the following:
1. removed the URL from grid's store's config
2. defined 2 new stores, which load from their own URLs
3. overriden my grid's store's load method - to make it invoke the new stores' load methods and wait for them to both finish loading, then do the processing and insert all the results into the main grid's store.

But, in overriding my main store's load method, I think I may have lost some of the original functionality.
Is there a better way to do this, something like a 'beforeLoad' event that I can hook into....?
I would want the event handler for this to do the stuff in my step 3 above, and then do whatever it needed to do in order to make everything look as if the store had just loaded its data from its URL like it used to.
What exactly IS that? Or am I barking up the wrong tree here?

Currently, I'm just overwriting the load method of my grid's store's INSTANCE (in the grid's constructor).
I guess there is a better way to do this???

PS. this is for Ext 3.

3 Dec 2013, 1:06 PM
I would handle this server side personally to merge data.

3 Dec 2013, 2:06 PM
OK, so I took on board some suggestions, had a play, and came up with this... It works too :D

Would also prefer to have done it server-side, but it was not an option in this case.
Thanks everyone!

MyDataMergingGridClass = Ext.extend( MyGridBaseClass,
constructor : function ( config )
// base ctor creates this.store
MyDataMergingGridClass.superclass.constructor.call( this, config );

var store1 = this.store;

var store2 = new Ext.data.JsonStore(
url: config.dataUrl2,
root: config.dataRoot,
id: config.dataIdField,
fields: config.dataFields,
autoLoad: false

// only load store1 if store2 is the caller
store1.addListener( 'beforeload', function( thisStore, options )
if( options && (options.caller == store2) )
return true;
return false;

// when store2 has loaded, load store1
store2.addListener( 'load', function( thisStore )
store1.load( { caller : thisStore } );
return true;

// when store1 has loaded, we know that store2 has loaded too.
// now we can merge the data (with optional pre- and post- processing)
store1.addListener( 'load', function( thisStore )

// process stores BEFORE merge?
if( (typeof config.processBeforeMergeStore1) == 'function' )
config.processBeforeMergeStore1.call( this, store1 );
if( (typeof config.processBeforeMergeStore2) == 'function' )
config.processBeforeMergeStore2.call( this, store2 );

// merge store2's records into store1
thisStore.loadData( store2.reader.jsonData, true ); // append

// process the stores AFTER merge?
if( (typeof config.processAfterMergeStore1) == 'function' )
config.processAfterMergeStore1.call( this, store1 );
if( (typeof config.processAfterMergeStore2) == 'function' )
config.processAfterMergeStore2.call( this, store2 );

thisStore.fireEvent( 'datachanged' );
return true;

} //end: constructor