ExtJS in attesa del caricamento di più negozi

Question

In che modo devo attendere il caricamento di più negozi? Ho un caso in cui ho bisogno di fare un po 'di lavoro solo quando vengono caricati due diversi negozi, quindi usare lo store.on("load", fn) di un negozio non è abbastanza buono.

Answer 1

Penso che si possa aggiungere listener di carico per entrambi i negozi, e verificare se l'altro finito ...

this.getStore('store1').on('load',function(store){ 
    if (this.getStore('store2').isLoading() == false){ 
    // callMethod to perform action .... 
    } 
},this); 

this.getStore('store2').on('load',function(store){ 
    if (this.getStore('store1').isLoading() == false){ 
     // callMethod to perform action.... 
    } 
},this); 

penso che questo modo si chiamerà il metodo solo quando sono entrambi caricati partendo dal presupposto che si sapere che la richiesta di carico è stata fatta per entrambi.

Answer 2

Ho avuto alcuni progetti che richiedevano il caricamento di diversi negozi prima di lavorare con i dati. Ho aggiunto un callback su di loro per verificare se ogni elemento nel Ext.data.StoreManager è stato caricato e in tal caso avrebbe fatto ciò che mi serviva con i dati.

Per aggiungere negozi per la StoreManager devi solo dargli un storeId nella sua configurazione, qualcosa di simile:

var store1 = Ext.create('Ext.data.Store', { 
    model: myModel, 
    storeId: 'store1', //<-- adds this to Ext.data.StoreManager 
    proxy: { 
     type: 'ajax', 
     url: 'url...', 
     reader: 'json' 
    }, 
    autoLoad: { 
     callback: initData 
    } 
}); 

var store2 = Ext.create('Ext.data.Store', { 
    model: myModel, 
    storeId: 'store2', 
    proxy: { 
     type: 'ajax', 
     url: 'url...', 
     reader: 'json' 
    }, 
    autoLoad: { 
     callback: initData 
    } 
}); 

// Initialize store dependencies when all stores are loaded 
function initData() { 
    var loaded; 
    Ext.data.StoreManager.each(function(store) { 
     loaded = !store.isLoading();  
     return loaded; 
    }); 
    if(loaded) { 
     // do stuff with the data 
    } 
} 

Answer 3

Di solito mi evitare il problema, perché mi sforzo per ridurre al minimo andata e ritorno client/server e migliorare le prestazioni : Imposto autoLoad su falso nell'archivio, quindi eseguo una richiesta esplicita di ajax che recupera i dati per tutti i negozi contemporaneamente, quindi uso store.loadData() per impostarlo direttamente su ciascun negozio. Lo svantaggio è ovviamente che richiede più codice e risultati in un accoppiamento più stretto.

Answer 4

Usiamo questo quando ci sono diversi negozi di aspettare:

Ext.define('Ext.ux.StoreLoadCoordinator', { 
mixins: { 
    observable: 'Ext.util.Observable' 
}, 
resetStoreLoadStates: function() { 
    this.storeLoadStates = {};    

    Ext.each(this.stores, function(storeId) { 
     this.storeLoadStates[storeId] = false; 
    }, this);  
},  
isLoadingComplete: function() { 
    for (var i=0; i<this.stores.length; i++) { 
     var key = this.stores[i]; 

     if (this.storeLoadStates[key]==false) { 
      return false; 
     } 
    } 

    return true;   
},  
onStoreLoad: function(store, records, successful, eOpts, storeName) { 
    this.storeLoadStates[store.storeId] = true; 

    if (this.isLoadingComplete()==true) { 
     this.fireEvent('load'); 
     this.resetStoreLoadStates(); 
    } 
},  
constructor: function (config) { 
    this.mixins.observable.constructor.call(this, config); 

    this.resetStoreLoadStates(); 

    Ext.each(this.stores, function(storeId) { 
     var store = Ext.StoreManager.lookup(storeId); 

     store.on('load', Ext.bind(this.onStoreLoad, this, [storeId], true)); 
    }, this); 

    this.addEvents(
     'load'    
    ); 
}}); 

Per utilizzarlo, passano in un array dei StoreID rilevanti:

var store1 = Ext.create('Ext.data.Store', { 
    storeId: 'Store1', 
    .... (rest of store config) 
}});   

var store2 = Ext.create('Ext.data.Store', { 
    storeId: 'Store2', 
    .... (rest of store config) 
}});   


var coordinatior = Ext.create('Ext.ux.StoreLoadCoordinator', { 
    stores: ['Store1', 'Store2'], 
    listeners: { 
     load: function() { 
      // Do post-load work 
     } 
    } 
});   

questo vi darà un carico singolo evento da gestire per più negozi. Si prega di notare che questo richiede Ext 4.xo successiva.

Answer 5

Per risolvere questo problema, utilizzo i magazzini di caricamento a catena.

Contro: più lento di quanto dovrebbe essere.

chainStoreLoad :function (stores, lastCall, idx) 
{ 
    if (idx === stores.length) { 
     if ("function" === typeof lastCall) { 
      lastCall.call(); 
     } 
     return; 
    } 
    stores[idx].load (function (r,o,s) { 
     Jx.chainStoreLoad (stores, lastCall, idx + 1); 
    }); 
} 

Esempio:

Jx.chainStoreLoad (
    [ 
     this.storeAssetType 
    , this.storeAssetProcurement 
    , this.storeAssetStatus 
    , this.storeAssetLocation 
    , this.storeSystemUser 
    ] 
, function() 
    { 
     self.panel.doRefresh (perm); 
    } 
, 0);