PDA

View Full Version : abort/cancel store.load?



@brady
3 Jul 2014, 4:14 AM
In the following thread on the Ext 2.x forum:

http://www.sencha.com/forum/showthread.php?50183-abort-cancel-store.load

The question of how to interrupt (or stop) the data store load process is posed. In response, the following code is suggested:



Ext.Ajax.abort(store.proxy.activeRequest);
delete store.proxy.activeRequest;


Based on a review of the 4.2.2 Ext.data.proxy.Proxy class source code, there is no “activeRequest” property. If you run this code, in ExtJS 4.2.2, you are effectively calling the Ext.Ajax.abort method with the request parameter undefined. Based on the body of the method, this results in the following code being exercised:



if (!request) {
request = me.getLatest();
}



This is fine except you don’t know for certain that the last Ajax request is the one emanating from the data store. If multiple connections are in play it could pickup anyone of them. Therefore, I have the same question: In ExtJS 4.2.2 how do you interrupt/stop the Ext.data.Store load process. Note, at the outset I did search the forum before deciding to post this question. The most relevant post I found was from 2011--

http://www.sencha.com/forum/showthread.php?136405

However, this thread seems to indicate that the associated defect EXT-11109 is still open. Is this true--ie is there no way in ExtJS 4.2.2 to simply abort the data store load process.


Thx,


b

Gary Schlosberg
11 Jul 2014, 4:00 PM
There is a note from a developer on that bug ticket indicating that this will be fixed in version 5, and that one will be able to abort operations like load(). Can you try your code against ExtJS 5.0.0?

@brady
14 Jul 2014, 10:39 AM
Wow,


It only took a week for someone to reply with the obvious answer: "Upgrade to 5.0.0, duh." Provided you are able to upgrade your app to 5.0.0, this is the best (only) answer. I my case, since I have yet to succeed in upgrading (see latest question / road block (http://www.sencha.com/forum/showthread.php?288559-Ext.util.Filter-Cannot-extend-with-filterFn-Defined)), I refactored around it--i.e. I got rid of the necessity having to abort the load. Anyway, I will mark this question as answered.


@brady

f.baron
3 Feb 2015, 3:48 AM
Here is an easy work around to stop a store's load in ExtJS 4.

Save in a local variable (for example as attribute of the store) the request generated by the load method:


store.load();
store.lastRequest = Ext.Ajax.getLatest();



Then you can use this variable to stop the call:


Ext.Ajax.abort(store.lastRequest);

vgtejada
22 Sep 2015, 12:49 PM
What about this?
You just need to override the Ext.data.Store class and then use the _load method instead of load.




Ext.define('yourapp.overrides.Store', {
override: 'Ext.data.Store',


requestHandler: null,


initComponent: function() {
this.callParent(arguments);
},


stop: function() {
if (this.requestHandler) {
try {
Ext.Ajax.abort(this.requestHandler);
} catch (e) {}
delete this.requestHandler;


this.fireEvent('load', this);
}
},


_load: function(options) {
var me = this,
proxy = this.getProxy(),
callback = options.callback || function() {},
params = options.params || {},
id;


if (this.isLoading()) {
if (this.requestHandler) {
this.stop();
} else {
return;
}
}


this.fireEvent('beforeload', this, {
action: 'read',
callback: callback,
params: params
});


this.requestHandler = Ext.Ajax.request({
headers: {
'Content-Type': 'application/json'
},
url: proxy.url,
timeout: proxy.timeout,
params: options.params || {},
method: options.method || 'GET',
success: function(response) {
if (me.requestHandler && id === me.requestHandler.id) {
var reader = proxy.getReader(),
records = reader.getResponseData(response).records,
success = (response.status === 200);


if (success) {
me.loadData(records);
}


if (Ext.isFunction(callback)) {
callback();
}


me.fireEvent('load', me, records, success);
}
},
failure: function(response) {
if (me.requestHandler && id === me.requestHandler.id) {
me.fireEvent('load', me, [], false);
}
}
});


id = this.requestHandler.id;
}


});

pligor
9 Aug 2016, 5:07 AM
In version 6.0.2 of ExtJS some things have changed and the `Operation` class has and `abort` methodThere is no getOperation method but there is the `beforeload` which is useful to grab the operation.By collecting one or more operations you can safely `abort` them before starting a new operation.The following Typescript class will be of help:module ext_ts { interface Abortable { abort(): void } export class AutoAbortPreviousOperation { private _storeOperations: Array = [] applyOnStore(store): any { let me = this return store.on({ destroyable: true, beforeload: function (theStore, operation, eOpts) { let lastOperation = me._storeOperations.pop() if (lastOperation) { console.log("aborting previous operation safely") lastOperation.abort() //this abort is safe so no need to check !lastOperation.isComplete() } else { //nop } me._storeOperations.push(operation) //add this operation for later usage return true //let the loading begin } }) } }}Note that the `statusCode` of a request which is forcely cancelled by the user is: -1