等到ajax請求完成

我有一個窗口內有幾個組合框的窗體。等到ajax請求完成

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

響應是「無法加載響應數據」。

有時候，當組合框展開並且商店尚未加載時，情況也會如此。

對於這些情況下，在我的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 
     }); 
    } 
    } 
});

我試圖阻止窗口被關閉，直到請求完成和數據被加載到comboboxs。

我不想使用setTimeout（）。

也許在窗口中使用遮罩，並在請求完成時取消遮罩或禁用/啓用關閉按鈕。

我讚賞尋找解決方案的建議。

EDITED：

另一種可能性，可能是更簡單的，是通過表格的所有組合框來迭代，並檢查是否在每個組合框，所述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(); 
     } 
    } 
}); 
}

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

來源

2017-01-16 josei

你爲什麼不使用與異步Ajax請求：假的。 – Tejas

嘗試在頂級「noStoresLoading」中有一個數值變量，每當商店加載數據時它會遞增（「noStoresLoading ++」）每次加載商店時它都會分解/ error（「noStoresLoading-- 「）在的任何時間點‘noStoresLoading’== 0，你知道有沒有商店裝載 –

@ Tejas1991。感謝您的建議（非常有趣）。我在我的應用程序上測試了它，但它並沒有解決問題，因爲當請求發生（緩慢）時，窗口可能會關閉，導致「錯誤」：無法響應數據 – josei

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

說明：返回一個承諾對象，觀察當某種類型綁定到集合中的所有動作，排隊與否，已經完成。

來源

2017-01-16 16:29:34

感謝艾迪的消化。在這個程序我都用ExtJS的或純JavaScript – josei

ExtJS的有承諾過......這裏嘗試鏈接：https://www.sencha.com/blog/asynchronous-javascript-promises/ –

@Addy只有ExtJS的6，不5，據我所知。 – Alexander

等到ajax請求完成

回答

相關問題