ExtJS esperando la carga de varias tiendas

Question

¿Cómo puedo esperar a que se carguen varias tiendas? Tengo un caso en el que necesito hacer algo de trabajo solo cuando se cargan dos tiendas diferentes, por lo que usar el store.on("load", fn) de una tienda no es suficiente.

Answer 1

Creo que se puede añadir detectores de carga para ambas tiendas, y comprobar si el otro terminó ...

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

creo que de esta manera se llamará al método sólo cuando ambos están cargados suponiendo que se saber que la solicitud de carga se ha realizado para ambos.

Answer 2

He tenido algunos proyectos que requieren que se carguen varias tiendas antes de trabajar con los datos. Agregué una devolución de llamada para verificar si cada elemento en el Ext.data.StoreManager se cargó y, de ser así, haría lo que necesitaba con los datos.

Para añadir las tiendas a la StoreManager sólo hay que darle un storeId en su configuración, algo como esto:

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

Por lo general evitar el problema, ya que me esfuerzo por minimizar ida y vuelta cliente/servidor y mejorar el rendimiento : Configuro autoLoad en falso en la tienda, luego realizo una solicitud explícita de ajax que obtiene los datos para todas las tiendas a la vez, luego uso store.loadData() para configurarlo directamente en cada tienda. La desventaja es, por supuesto, que requiere más código y los resultados en un acoplamiento más estricto.

Answer 4

Utilizamos esto cuando hay varias tiendas que esperar en:

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

Para usarlo, pase en una matriz de los StoreID relevantes:

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

esto le dará una sola carga evento para manejar en múltiples tiendas. Tenga en cuenta que esto requiere Ext 4.x o posterior.

Answer 5

Uso las tiendas de carga de cadena para resolver esto.

Contras: más lento de lo que debería ser.

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

Ejemplo:

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