等到ajax請求完成

Question

我在一個窗口中有一個帶有幾個組合框的表單。

如果我顯示窗口並立即關閉它（使用按鈕關閉方法），有時我與服務器的連接很差，並且在組合框中加載數據的請求被中斷。

響應是“無法加載響應數據”。

有時，當擴展組合框並且尚未加載存儲時，會發生同樣的情況。

對於這些情況，在我的Application.js文件中，我有以下函數顯示錯誤消息。

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
        });
    }
  }
});

我試圖阻止窗口關閉，直到請求完成並將數據加載到組合框中。

我不想使用setTimeout（）。

也許在窗口中使用掩碼並在請求完成時取消屏蔽ou禁用/啟用關閉按鈕。

我很欣賞有關尋找解決方案的建議。

編輯：

另一種可能更簡單的方法是遍歷表單的所有組合框，並在每個組合框中檢查store.isLoading（）：如果是，它會顯示一條消息，等待加載完成。

EDITED

如果表單只有一個組合框，則以下處理程序似乎可以解決問題：它會創建一個初始掩碼並在加載存儲后取消屏蔽它：

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();
 }
}

問題是迭代幾個組合框：我嘗試了以下代碼，沒有成功（存儲在視圖模型中）：

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();
      }
   });    
}

該解決方案的問題在於，如果加載了一個組合框的存儲，則獨立於仍然要加載的其他組合框觸發unmask方法。

如何等到所有商店都裝滿？

EDITED

我嘗試過不同類型的迭代和循環，以下解決方案似乎有效。

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();
        }
    }
 });  
}

我贊賞有關改進此解決方案的建議或其他建議。

Answer 1

如果jQuery不是問題...我建議使用Promises

描述：返回一個Promise對象，以觀察綁定到已排隊或未排隊的某個類型的所有操作是否已完成。