Comment attendre que tous les magasins soient chargés dans ExtJs ?

Question

J'ai un ensemble de boîtes combo qui sont pilotées par cinq magasins et je veux lancer une fonction une fois que tous les magasins sont complètement chargés. Quelle est la méthode recommandée pour ce faire ? Je pourrais faire quelque chose comme ça, mais c'est un peu compliqué :

var store1Loaded = false;
var store2Loaded = false;

store1.on('load', function(){
    store1Loaded = true;
});

store2.on('load', function(){
    store1Loaded = true;
});

store1.load();
store2.load();

function WaitForFunction()
{
    if (!store1Loaded || !store2Loaded)) {
       setTimeout( WaitForFunction, 100);
       return;
    }
    AllStoresLoaded();
}

function AllStoresLoaded(){
      //Do Something
}

Answer 1

Utilisez Deft JS

Deft JS est un addon injecté via l'injection de dépendance. Il permet à l'utilisateur d'ajouter des promesses dans les appels AJAX et la promesse n'est résolue que lorsque l'appel est terminé. Lien pour Deft JS . Utilisez Ext.defer.All() ; pour charger vos 5 magasins et une fonction de rappel particulière sera appelée une fois que tous les magasins seront chargés. Dans cette fonction, mettez en œuvre votre logique.

Answer 2

ExtJs Store a une méthode charge et la méthode de chargement ont une fonction de rappel.

J'ai créé une démo que vous pouvez consulter ici. Sencha fiddle

Cette fonction va créer un magasin et le retourner.

function createStore(id) {
    return Ext.create('Ext.data.Store', {
        storeId: 'store_' + id,
        alias: 'store.store_' + id,
        proxy: {
            type: 'ajax',
            url: 'data.json',
            timeout: 300000,
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        }
    });
}

Par exemple, j'ai un tableau de magasins. Il contient storeId ou alias.

var storeArry = [],
    store = '';

for (var key = 0; key < 5; key++) {
    storeArry.push(createStore(key).storeId);
}

À chaque appel de store, nous pouvons supprimer les données de storeArray ou maintenir une variable pour la vérification.

Ext.getBody().mask('Please wait..');
Ext.defer(function () {
    Ext.getBody().unmask();
    Ext.Array.forEach(storeArry, function (storeId) {
        //For checking store is created or not
        //if store is not created we can create dyanamically using passing storeId/alias
        store = Ext.getStore(storeId);
        if (Ext.isDefined(store) == false) {
            store = Ext.create(storeId);
        }
        store.load({
            callback: function () {
                //On every store call back we can remove data from storeArray or maintain a veribale for checking.
                Ext.Array.remove(storeArry, this.storeId);
                if (storeArry.length == 0) {
                    Ext.Msg.alert('Success', 'All stored is loaded..!');
                }
            }
        });
    });
}, 3000);