ExtJS czeka na załadowanie wielu sklepów

Question

Jak powinienem czekać na załadowanie wielu sklepów? Mam przypadek, w którym muszę wykonać pewną pracę tylko wtedy, gdy załadowane są dwa różne sklepy, więc używanie store.on("load", fn) jednego sklepu nie jest wystarczająco dobre.

Answer 1

myślę można dodać słuchaczy obciążenia zarówno dla sklepów, i sprawdzić, czy ten drugi zakończył ...

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

myślę w ten sposób będzie to nazwać metodę tylko wtedy, gdy oba są ładowane przy założeniu, że ciebie wiem, że wniosek o obciążenie został złożony dla obu.

Answer 2

Mam kilka projektów, które wymagały załadowania kilku sklepów przed rozpoczęciem pracy z danymi. Dodałem do nich wywołanie zwrotne, aby sprawdzić, czy każdy element w Ext.data.StoreManager został załadowany, a jeśli tak, to zrobiłby to, co było mi potrzebne w danych.

Aby dodać sklepów do StoreManager po prostu trzeba dać mu storeId w config, coś takiego:

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

Zwykle uniknąć problemu, bo staramy się zminimalizować roundtrips klient/serwer i poprawy wydajności : Ustawię autoLoad na false w sklepie, a następnie wykonaj jawne żądanie ajax, które pobiera dane dla wszystkich sklepów jednocześnie, a następnie użyj store.loadData(), aby bezpośrednio ustawić je w każdym sklepie. Minusem jest oczywiście to, że wymaga więcej kodu i skutkuje ściślejszym sprzężeniem.

Answer 4

Używamy tego gdy istnieje kilka sklepów, aby czekać na:

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

Aby go użyć, należy przekazać w tablicy odpowiednich storeIds:

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

to daje pojedynczy ładunek zdarzenie do obsługi dla wielu sklepów. Należy pamiętać, że wymaga to rozszerzenia 4.x lub nowszego.

Answer 5

Używam sklepów z ładowaniami łańcuchowymi, aby rozwiązać ten problem.

Minusy: wolniej niż być powinno.

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

Przykład:

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