Question

In my app, I need to execute several ajax requests at the same time, but each request takes various time based upon response size. In order to avoid further operations during ajax request, I’d like to use Ext.LoadMask in each ajax call, like this:

for(var i=0; i<ajaxCount; i++) {
    var loadMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading " + ajaxName[i]});
    Ext.Ajax.request({
        success: function() {
            loadMask.hide();
        },
        failure: function() {
            loadMask.hide();
        }
    }
}

however, i found out that the hide() will hide all of loadMaskes in the memory. What I want to do is only hide the one in this ajax request, so that there is always a mask until the end of all requests.

Is there another way of implementing this?

thanks!

Answer 1

Why not using one the same mask for all the requests and removing it once all the requests are returned?

var requestCounter = 0;
function hideMask(){
    if (requestCounter > 1){
        requestCounter--;
    } else {
        loadMask.hide();
    }
}
if (ajaxCount > 0){
    var loadMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading"});
}

for(var i=0; i<ajaxCount; i++) {    
    requestCounter++;
    Ext.Ajax.request({
        success: hideMask,
        failure: hideMask
    }
}