ExtJS Store download listener not invoked

Question

I have my own data warehouse, which stores information about whether the store is loaded once or not.

/** * Custom DataStore which stores the information whether data has been loaded once or not. */ Ext.example.Store = Ext.extend(Ext.data.Store, { loaded: false, initComponent: function() { this.superclass().initComponent.call(this); this.addEvents('load','beforeload'); }, isLoaded : function() { return this.loaded; }, listeners: { 'load' : function(store,records,options) { this.loaded = true; } } }); 

This worked fine until recently, I added a "beforeload" event listener to the instance of this store. Now the "listen" listener does not start.

 var accountsDataStore = new Ext.example.Store({ id : 'account', proxy : new Ext.data.HttpProxy({ url : 'app/account/fetch/all', method : 'post', api : { destroy : 'app/account/delete' } }), reader : accountReader, writer : accountWriter, remoteSort : true, sortInfo : { field : 'createdOn', direction : "DESC" }, listeners: { beforeload: function(store, options) { var sort = options.params.sort; // setting the sort parameters to match the property names in the DTO switch(sort) { case 'company' : options.params.sort = 'company.name'; break; default: // do nothing } } } }); 

What can i do wrong? Also, please let me know your suggestions for improvement.

Answer 1

The problem is that you should never install objects in a prototype unless you really know what that means (that it will be used by all instances and can be redefined for each instance)

In Ext JS, I only set configuration parameters on the prototype that are for convenience only and can be overridden by the caller.

Your first class, Ext.example.Store places listeners on its prototype. Then you go over and overwrite it in accountDataStore, passing the listener object to the configuration.

To fix your problem, instead of installing listeners on the prototype, just call this.on('event') from the constructor.

 /** * Custom DataStore which stores the information whether data has been loaded once or not. */ Ext.example.Store = Ext.extend(Ext.data.Store, { loaded: false, constructor: function() { this.superclass().constructor.call(this); // No need to call this, you're not adding any events // this.addEvents('load','beforeload'); this.on('load', function(store,records,options) { this.loaded = true; }, this); }, isLoaded : function() { return this.loaded; } }); 

Answer 2

The documentation for the beforeload event states:

"Fires before executing a query for a new data object. Beforeload handler returns false, the loading action will be canceled."

You can try to return true from your forforeload listener to ensure that the load action is still running.

Answer 3

store.totalCount

if it is loaded, this property returns the number yet this property is undefined (ExtJS-4.1.0-rc1)

Answer 4

Well, I think there is a problem with the area. Please try this way:

 listeners: { 'load' : { fn : function(store,records,options) { console.log(this, this.loaded); this.loaded = true; }, scope : this } } 

Or you can use:

 listeners: { 'load' : function(store,records,options) { store.loaded = true; } }