Sencha Touch 2, Ajax Promise

2
votes

I am looking for the Best practice in one use case, (using sencha touch 2 framework) :

I have multiple ajax calls (JSONP response), and I want to filter feed data by date between all of those response. The problem is I do not when to start filtering. I want to know when all ajax is completed.

in jQuery I would use, "promises", for ex:

    $.when($.ajax("/page1.php"), $.ajax("/page2.php"), ... $.ajax("/pageN.php")).done(function(a1,  a2){
      // do something
    });

, I cannot find any similar "Deferred" in sencha touch 2, or maybe you can suggest me another way to detect and data was loaded.

I appreciate any suggestion help or the best practice in this situation.

UPDATES:

Yes, I use everywhere the sencha touch "Ext.Ajax.request".

I tried to use something like this , to catch all requests:

    Ext.Ajax.on('beforerequest', this.dosomething, this);
    Ext.Ajax.on('requestcomplete', this.dosomething, this);
    Ext.Ajax.on('requestexception', this.dosomething, this);

But nothing gets fired, in any of these 3 cases,

PS: I tried to execute this event on my main mage is "initialized" as well when i "lunch" the whole application, in any situation it doesn't fire anything.

Is this something wrong when and how I try to fire the event.

Thanks in advice !!!

2
javascriptajaxsencha-touch-2
Did you take a look at the code behind $.when() and $.done() ? – Titouan de Bailleul
It is for jquery and all works fine, but I need for sencha something similar – AlexC
It's all Javascript right? So I was just wondering if you took a look at what was the actual executed code behind these jQuery functions. – Titouan de Bailleul
it may work, but that is the thing, not sure if this is the best practice to include another framework just for this. plus most likely i will have to recreate the Ext.Ajax to jquery object Ajax, not sure about this, but so far i have no need for the jquery in the project, except this. – AlexC
But I agree it is a solution as well. Which I have in mine mind as well :), Thanks – AlexC

2 Answers

1
votes

Assuming you are using Ext.Ajax.request, and want to make all requests together at the same time, there are a few ways to do this. When each request is made you can increment a simple counter, and decrement that counter in the request callback functions. In the callback functions also check if the counter is back to zero - if so then all requests have been completed, and you can now combine all your data. Relatively simple.

Another option is to utilize Ext.Ajax.requests object - which contains all the current requests that have not been completed. As long as there aren't other requests starting between when these ones start/finish you can just check this object in your callback function, and if there are no requests then you can handle your data.

See this link for documentation on Ext.Ajax.

1
votes

It's not perfect, but this never fails for me: 

    function removeMaskIfNoAjaxCalls() {
        //clean up mask with timer, because in the Ext.Ajax.request there is one request (current) 
        setTimeout(function() {
            if (Object.keys(Ext.Ajax.requests).length == 0) Ext.Viewport.setMasked(false);
        }, 2000)
    }