Ext.js – Cancel a load on an Ext.data.Store

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.

4 thoughts on “Ext.js – Cancel a load on an Ext.data.Store

  1. That’s true, but in certain cases you may only want to cancel one specific request/load. Two examples that I’ve come across are

    • when an app also has a server-side logging/tracking framework which you don’t want to prevent requests from hitting the server on
    • another one is when an app is made of losely coupled/re-usable components which can be added onto a Portal style app. You don’t want one portlet to be able to cancel the AJAX requests of the others
  2. Your post what i looking for, but i got error:
    in file ext-all-debug.js (line 76562)
    delete me.lastOptions.callback;

  3. Ok after follow all,

    i got this line error:
    MG/data/AbstractStorePatch.js
    line 19 : request = me.proxy.read(operation, me.onProxyLoad, me);

    chrome: Uncaught TypeError: Cannot convert null to object ext-all-debug.js:76562
    me.read.callback ext-all-debug.js:76562
    Ext.apply.callback ext-all-debug.js:7178
    Ext.define.onProxyLoad ext-all-debug.js:76889
    Ext.define.processResponse ext-all-debug.js:70749
    (anonymous function) ext-all-debug.js:70953
    Ext.apply.callback ext-all-debug.js:7178
    Ext.define.onComplete ext-all-debug.js:32639
    Ext.define.onStateChange ext-all-debug.js:32588
    (anonymous function)

    it related my tree store loading proxry

Leave a Reply