1. #1
    Sencha User
    Join Date
    Feb 2009
    Posts
    20
    Vote Rating
    0
    amitayh is on a distinguished road

      0  

    Default Aborting running store's AJAX request

    Aborting running store's AJAX request


    Hi,
    I'm trying to add a "cancel" button which will abort a running AJAX request made by a data store. (the button will be disabled by default, enabled on the "beforeload" event, and disabled again on the "load" event)
    I didn't find any way to do this... I need to call the Ext.Ajax.abort() method, but I don't know how to get the request ID.

    I know this will only cancel the AJAX request, and not the actual request on the server side, but I have a grid with many parameters which may take a long time to load and the clients occasionally need to cancel running requests and change the parameters.

    What I need is something like this:

    Code:
    ...
    
    var lastRequestId;
    
    store.on('beforeload', function(store, operation) {
        lastRequestId = operation.???; // What do I do here?
        button.setDisabled(false);
    });
    
    store.on('load', function() {
        button.setDisabled(true);
    });
    
    button.on('click', function() {
        Ext.Ajax.abort(lastRequestId);
    });
    
    ...
    Thanks in advance for your help,
    Amitay.

  2. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    I don't know if this is the best way (or even if it will work), but the store has a property called "pendingRequests" which stores an array of requestId's which are tied to the operations created for the store's request. These requestId's are then removed when the response is received back after the proxy prefetch is complete.

  3. #3
    Sencha User
    Join Date
    Feb 2009
    Posts
    20
    Vote Rating
    0
    amitayh is on a distinguished road

      0  

    Default


    I don't see this property, and it's not documented...
    Are you sure it exists on version 4.1?

  4. #4
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    Ah, sorry, I was looking at the docs for 4.0

  5. #5
    Sencha User
    Join Date
    Feb 2009
    Posts
    20
    Vote Rating
    0
    amitayh is on a distinguished road

      0  

    Default


    Thanks for you help.

    Anyone else has an idea?
    Thanks.

  6. #6
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    928
    Vote Rating
    49
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    There was a feature request raised for this around the time 4.0 was in the developer previews.
    Not sure if/when it's likely to get picked up...
    Product Architect
    Altus Ltd.

  7. #7
    Sencha User
    Join Date
    Feb 2009
    Posts
    20
    Vote Rating
    0
    amitayh is on a distinguished road

      0  

    Default


    If it interests someone - I was managed to do this by creating a custom proxy class:

    Code:
    Ext.define('MyProject.proxy.MyProxy', {
    
        extend: 'Ext.data.proxy.Ajax',
    
    
        actionMethods: {
            read: 'POST'
        },
    
    
        lastRequest: null,
    
    
        doRequest: function(operation, callback, scope) {
            var writer  = this.getWriter(),
                request = this.buildRequest(operation, callback, scope);
    
    
            if (operation.allowWrite()) {
                request = writer.write(request);
            }
    
    
            Ext.apply(request, {
                headers: this.headers,
                timeout: this.timeout,
                scope: this,
                callback: this.createRequestCallback(request, operation, callback, scope),
                method: this.getMethod(request),
                disableCaching: false
            });
    
    
            this.lastRequest = Ext.Ajax.request(request);
    
    
            return request;
        },
    
    
        abortLastRequest: function() {
            Ext.Ajax.abort(this.lastRequest);
        }
    
    
    });

Thread Participants: 2