ExtJS Store load listener not being invoked

Question

I have a custom data store which stores the information whether the store has been 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 was working fine until recently I added a 'beforeload' event listener to an instance of this store. The 'load' listener does not get invoked now.

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 could I be doing wrong here? Also please let me know your suggestions to improve

Answer 1

The problem is that you should never set objects on the prototype, unless you really know what it means (that it will be shared by all instances and can be overridden on a per instance basis)

In Ext JS, I only set config options on the prototype that are only for convenience and may be overridden by the caller.

Your first class Ext.example.Store puts listeners on its prototype. Then you go and overwrite it in accountsDataStore by passing in a listeners object into the config.

To fix your problem, instead of setting 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 a request is made for a new data object. If the beforeload handler returns false the load action will be canceled."

You could trying returning true from your beforeload listener to ensure the load action still runs.

Answer 3

store.totalCount

if loaded, this property return a number else this property is undefined (extjs-4.1.0-rc1)