ExtJs 4: Remote Combobox - Abort Previous Request

Question

Like the title says, I would like to abort the previous ajax request. The combobox request through ajax whenever a user types in letters(or numbers) it request data, like I said through ajax, then returns the data back to the combobox.

My problem is that the ajax request will pile up whenever I put a user inputs in the field.

What I want to do is to abort first the previous request then proceed to the present request. I tried this code:

  comboObj.onTypeAhead = Ext.Function.createInterceptor(comboObj.onTypeAhead, function() {
     Ext.Ajax.abort(); //aborts the last Ajax request
     return true; //runs the onTypeAhead function
  });

That didnt work, then tried this:

  ......
  listeners: {
        beforequery: function(evt){
           Ext.Ajax.abortAll(); //cancel any previous requests
           return true;
        }
     }

That did not work for me either because I have a timer that also uses ajax request, which will also be cancelled if the listener is executed.

How do I do this?

Answer 1

It took me a long time to figure it out. Ext.Ajax.abort(request) is able to abort requests. But it is pretty hard to get the current request object (or better, the request object Ext.Ajax.abort needs) from a store.

Finally I got this:

...
if (store.loading && store.lastOperation) {
  var requests = Ext.Ajax.requests;
  for (id in requests)
    if (requests.hasOwnProperty(id) && requests[id].options == store.lastOperation.request) {
      Ext.Ajax.abort(requests[id]);
    }
}
store.on('beforeload', function(store, operation) {
  store.lastOperation = operation;
}, this, { single: true });

store.load();
...

Not nice but lasting store loads are reliably canceled.

Answer 2

store.on('beforeload', function(store, operation) {
    store.lastOperation = operation;
    if (store.loading && store.lastOperation) {
        Ext.Ajax.abort(store.lastOperation.request);
    }
});