Have you ever wanted to cancel a load you initiated on an Ext.js Store? Unfortunately Ext.js doesn’t provide this functionality out of the box, but the below patches provide a way of doing this.

By default the Ext.data.Store.load() call would return itself, but in the below code I changed it to return an Ext.data.Operation which I also added a new cancel() function on. To me it’s more useful to get the Operation back because I can also check the status of the load – See the Ext.data.Operation for other methods: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Operation

Why would I want this?

• If you server takes a long time to load data (maybe they’re on a slow 3G connection) and the user wishes to stop the request
• Your user misconfigures some properties in a form which setup the query with which the store loads it’s data. They may wish to change them and reload the store. This would allow the AJAX request to be aborted and the new load fired
• Perhaps you have a large single page app and your user switches tabs and therefore there is no point in continuing with the request

There’s probably more use cases, but these are the ones I’ve come across personally.

How do I include this?

Copy the below into new files and put them in your project – I’d recommend creating the directory structure to match the names:

MG/data/OperationPatch.js

Ext.define('MG.data.OperationPatch', {
    override: 'Ext.data.Operation',
    request: null,

    setRequest: function(request) {
        this.request = request;
    },
    /**
     * Cancels the active operation
     */
    cancel: function() {
        if (this.request !== null) {
            Ext.Ajax.abort(this.request);
        }
    }
});

MG/data/AbstractStorePatch.js

Ext.define('MG.data.AbstractStorePatch', {
    override: 'Ext.data.AbstractStore',

    load: function(options) {
        var me = this,
            operation,
            request;
 
        options = options || {};
 
        options.action = options.action || 'read';
        options.filters = options.filters || me.filters.items;
        options.sorters = options.sorters || me.getSorters();
 
        operation = new Ext.data.Operation(options);
 
        if (me.fireEvent('beforeload', me, operation) !== false) {
            me.loading = true;
            request = me.proxy.read(operation, me.onProxyLoad, me);
            if (!Ext.isEmpty(request)) {
                operation.setRequest(request);
            }
        }
 
        return operation;
    }
});

Then you’ll need to configure your app to load them on startup. I usually add the following at the top of the same file as my Ext.application definition

Ext.Loader.setPath('MG', './MG'); // tweak this to be where you put the files
Ext.application({
    name: 'MyApp',
    requires: [
        'MG.data.OperationPatch',
        'MG.data.AbstractStorePatch'
    ],
    ... // rest of your Ext.application definition
});

Using the new api in your app

To cancel a request you’d simply do:

var operation = myStore.load();
...
operation.cancel();

That’s all there is to it!

Licensing

For those that need a license to use stuff, the above are released under the MIT Open Source License.