In ExtJS how do I know when a store starts sorting and finishes sorting?

Question

I have a store for a grid. The user can click on the headers to sort. I need to know when a store begins sorting and finishes sorting. What do I attach to? I can see no begin sort and end sort events for the store.

Here is the sort that I am using:

Ext.override(Ext.data.Store, {
    // override
    createSortFunction: function (field, direction) {
        direction = direction || "ASC";
        var directionModifier = direction.toUpperCase() == "DESC" ? -1 : 1;
        var sortType = this.fields.get(field).sortType;

        //create a comparison function. Takes 2 records, returns 1 if record 1 is greater,
        //-1 if record 2 is greater or 0 if they are equal
        return function (r1, r2) {

            var v1;
            var v2;

            v1 = sortType(r1.data[field]);
            v2 = sortType(r2.data[field]);

            // To perform case insensitive sort
            if (v1.toLowerCase) {
                v1 = v1.toLowerCase();
                v2 = v2.toLowerCase();
            }

            return directionModifier * (v1 > v2 ? 1 : (v1 < v2 ? -1 : 0));
        };
    }
});

Answer 1

The general solution is that you should use Ext.util.Observable.capture() to listen to all events on the store so you can see what is really happening.

The answer is that it depends on whether remoteSort is true or not. If it's true, it does the same thing as loading the store from the server. If it is false, then it would appear to be synchronous.

Remote Sort:

beforeload
datachanged
refresh
load
read

Local Sort:

datachanged
read

Sorting about 1000 elements took 20ms

Demonstration:

http://jsfiddle.net/el_chief/q9cvs/3/

You could fire your own events too:

Ext.data.Store.override({

  sort: function(sorters, direction){

    this.fireEvent('sorting', this, {});

    this.callParent(arguments);

    this.fireEvent('sorted', this, {});

  }
});