等到ajax请求完成

Question

I have a form with several comboboxes within a window.

If I display the window and close it immediately (with a button close method), sometimes I have poor connection to the server and the request to load the data in comboboxes is interrupted.

Response is "Failed to load response data".

Sometimes, the same happens when a combobox is expanded and the store has not yet been loaded.

For these cases, in my Application.js file I have the following function which displays an error message.

Ext.util.Observable.observe(Ext.data.Connection, {
requestexception: function (connection, response, options) {
      Ext.Ajax.abort(store.operation.request);
        Ext.Msg.show({
            title: 'Error!',
            msg: 'Message...',
            icon: Ext.Msg.ERROR,
            buttons: Ext.Msg.OK
        });
    }
  }
});

I'm trying to prevent the window from being closed until the requests were completed and the data was loaded into the comboboxs.

I do not want to use setTimeout().

Maybe use a mask in window and do the unmask when the request is completed ou disabled/enable de close button.

I appreciated suggestions for finding a solution to this.

EDITED:

Another possibility, probably simpler, is to iterate through all the combobox of the form and check if, in each combobox, the store.isLoading (): If yes, it displays a message to wait until the load is finished.

EDITED

If the form has only one combobox the following handler seems to solve the problem: it creates an initial mask and unmasks it after the store is loaded:

handler: function (btn) {
  var win = Ext.widget('winSearch', {
    animateTarget: this
  }).showBy(this, 'bl');

  win.getEl().mask('Loading...');    

  var store =  Ext.getStore('storeCombo1Id');    

  if(store.isLoading()){
     store.on('load', function() {
        win.getEl().unmask();
     });
  }else{
     win.getEl().unmask();
 }
}

The problem is to iterate through several combobox: I tried the following code, without success (the stores are in a viewmodel):

handler: function (btn) {
  var win = Ext.widget('winSearch', {
      animateTarget: this
  }).showBy(this, 'bl');

  win.getEl().mask('Loading...');


  // var store1 =  Ext.getStore('storeCombo1Id');
  // var store2 =  Ext.getStore('storeCombo2Id');
  // var store3 =  Ext.getStore('storeCombo3Id');
  // var allComboboxStores = [store1, store2, store3];

  var allComboboxStores = ['storeCombo1Id', 'storeCombo2Id', 'storeCombo3Id'];

  Ext.each(allComboboxStores, function(storeId) {
      var store = Ext.getStore(storeId);

      console.log(store); //console show 3 stores

      if(store.isLoading()){
        store.on('load', function() {
            win.getEl().unmask();
        });
      }else{
        win.getEl().unmask();
      }
   });    
}

The problem with this solution is that if the store of one of the comboboxs is loaded it triggers the unmask method independently of other comboboxs still to be loaded.

How to wait until all stores are loaded?

EDITED

I have tried different types of iterations and loops and the following solution seems to work.

handler: function () {
var win = Ext.widget('mywindow', {
    animateTarget: this
}).showBy(this, 'bl');

win.getEl().mask('Loading...');

var allComboboxStores = ['storeCombo1Id', 'storeCombo2Id', 'storeCombo3Id'];

var indexStores = 0;
Ext.each(allComboboxStores, function(storeId) {
    var store = Ext.getStore(storeId);
     if(store){
        if(store.isLoading()){
            indexStores++
            store.on('load', function() {
                indexStores--;
                if (indexStores == 0){
                    win.getEl().unmask();
                }
            });
        }
        else if(!store.isLoading() && indexStores == 0){
             win.getEl().unmask();
        }
    }
 });  
}

I appreciated suggestions to improve this solution or suggestions to do otherwise.

Answer 1

If jQuery is not a problem ... I suggest using Promises

Description: Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.