ExtJS等待多家商店加载

Question

我该如何去等待多家商店加载？我有一个案例，我只需要加载两个不同的商店时需要做一些工作，因此使用一家商店的store.on("load", fn)不够好。

Answer 1

我想你可以添加负载监听两个门店，并检查另一个结束后...

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

我觉得这种方式，它会调用只有当他们都加载假设方法你知道两者的加载请求。

Answer 2

我有一些项目需要几个商店加载之前处理数据。我添加了一个回调函数来检查Ext.data.StoreManager中的每个项目是否已加载，如果是，它会根据数据做我需要的。

专卖店添加到StoreManager你就必须给它一个storeId在其配置，这样的事情：

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

我通常避免这个问题，因为我努力减少客户机/服务器的往返并提高性能： 我在商店上将autoLoad设置为false，然后执行显式的ajax请求，一次获取所有商店的数据，然后使用store.loadData（）直接将其设置为每个商店。 不利的一面是它需要更多的代码和更紧密的耦合结果。

Answer 4

我们用这个当有几家商店伺候：

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

要使用它，通过在相关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 
     } 
    } 
});   

这会给你一个负载事件来处理多个商店。请注意，这需要Ext 4.x或更高版本。

Answer 5

我使用链式加载存储来解决这个问题。

缺点：比它应该慢。

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

实施例：

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