View Full Version : Adding an event listener to all stores automatically

22 Oct 2010, 7:31 AM

Currently when a store is loaded I am showing a progress bar while the data is loaded into the store. But I have to copy/paste the same codes to all the stores.

Is there anyway I can add this feature to all the stores in my app by default?

So, anytime a store is loaded, the progress bar window kicks in.

Thanks in advance guys, extjs rules!

22 Oct 2010, 7:33 AM
if it really is for all stores, add it to the prototype

you could also extend the store and add the listener to that one (prototype or inside the initComponent dynamically)

kind regards

22 Oct 2010, 8:01 AM
If all of your stores are of the same type (all JsonStore, for instance) then extending is probably the way to go.

MyJsonStore = Ext.extend(Ext.data.JsonStore, {
//Code shared among all classes here

var store = new MyJsonStore();

22 Oct 2010, 9:22 AM

22 Oct 2010, 9:51 AM

When I think about this question I do not immediately think "extend" because you are not adding functionality, you are simply setting up a store using stuff already provided by json store, which makes me think use the factory pattern


Couldnt you set up a function such as "createMyJsonStore" and have it return a store with the event already attached?

Is the downside to that approach going to cause the memory for the function to be allocated for each store?

I am going to spend some time looking into what Animal suggested because I've seen "Observable" come up a few times but have never used it in my code, and may be missing some important stuff. I am not 100% sure how to take that class and get the listener added to all stores.

22 Oct 2010, 10:21 AM
A suggestion:

var storeCount = 8, // However many you have
storesLoaded = 0;
Ext.util.Observable.observeClass(Ext.data.Store, {
load: function() {
myProgressBar.updateProgress(storesLoaded / storeCount);


9 May 2012, 3:49 AM
In Ext JS 4

Ext.data.Store.on('load', function(store, records, successful, options) {
console.log('generic store load event handler', arguments);