Question

我有一组由五个商店驱动的组合框，我想在所有商店完全加载后启动一个功能。这样做的推荐方法是什么？我可以做这样的事情，但感觉很糟糕：

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

使用store.isLoading()方法，我认为这就是它的用途。我用它，它工作正常。

在执行之前配置要加载的商店一些storeId配置的逻辑。
将这些storeIds放入数组中。
每当加载其中一个商店迭代数组时，请使用Ext.getStore查找商店并在其上调用isLoading。
如果阵列中的所有商店仍未加载，请执行您的逻辑。

例如，假设我想在执行某些逻辑之前加载store1和store2（我在非MVC模式中显示这个，因为看起来你没有使用你的代码片段中的MVC模式）

var store1 = Ext.create('Ext.data.Store', {
    model: myModel,
    storeId: 'store1', // store needs to be done MVC style or have this config
    proxy: {
        type: 'ajax', 
        url: 'url...',
        reader: 'json'
    },
    autoLoad: {
        callback: initData // do this function when it loads
    }
});

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

// the stores to be checked
var myComboStores = ['store1', 'store2']

// function does logic if they are both finished loading
function initData() {
    var loaded = true;
    Ext.each(myComboStores, function(storeId) {
        var store = Ext.getStore(storeId);
        if (store.isLoading()) {
            loaded = false;
        }
    });
    if(loaded) {
        // do stuff with the data
    }
}

Answer 2

使用超时不是一个很好的解决方案，但是也不得不依赖商店经理的所有东西。

我会做类似的事情：

var allStores = [store1, store2],
    len = allStores.length,
    loadedStores = 0,
    i = 0;

for (; i < len; ++i) {
    allStores[i].on('load', check, null, {single: true});
}

function check() {
    if (++loadedStores === len) {
        AllStoresLoaded();
    }
}

function AllStoresLoaded() {
    //Do Something
}

如果你正在使用它，你甚至可以把它变成一个类。

Answer 3

扩展商店 - 将'loaded'属性添加到子类，   覆盖'initComponent（）'并附加到其中的'load'事件，引发   在事件处理程序中将'loaded'设置为true，添加'isLoaded（）'   方法返回'loaded'属性的值。

其他方式，如果您使用http transport - store.proxy.conn.isLoading（）

查看this

Answer 4

function storeLoadingHandler(justLoadedStore) {
    // I use some quick hacky flag, you can do it by your own way
    justLoadedStore.loaded = true;

    var allStoresLoaded = true;

    // just walk through all stores registered in the application
    // do not forget to use MVC-style stores or add 'storeId' manually
    // or register every store with your custom code
    Ext.StoreManager.each(function(existingStore) {
        // we have to ignore system stores
        if (existingStore.storeId != 'ext-empty-store') {
            if (!existingStore.loaded) { // our flag or undefined
                // nope, at least one of stores is not loaded
                allStoresLoaded = false;

                return false
            }
        }
    })

    if (allStoresLoaded) // then do something
        alert('All stores are loaded.');
}

// add the loading handler for all stores
Ext.StoreManager.each(function() {
    this.on('load', storeLoadingHandler);
})

Answer 5

如果您遇到问题，因为当商店加载时间太长而无法正确显示/刷新组合框时，解决方案是创建将在这样的组合框中使用的每个商店

Ext.create("Ext.data.Store", {
    ...,
    loading: true,
    ...
});

组合框检查它们用于刷新信息的商店中的参数，但有时甚至在商店开始加载并且'loading'标志设置为true之前创建并刷新组合框，然后它赢了当商店完成加载时，不要刷新它的值。将其设置为true可以明确解决问题。我不知道你的情况是否如此，但我想如果是的话我会提到它。

Answer 6

使用Deft JS

Deft JS是通过依赖注射注入的插件。它允许用户在AJAX调用中添加promise，只有在调用完成后才能解析promise。 Link for Deft JS。使用 Ext.defer.All（）; 加载所有5个商店，并在加载所有商店后调用特定的回调函数。在该功能中，实施您的逻辑。

Answer 7

ExtJs商店有方法 load ，加载方法有回调函数。

我创建了一个演示。你可以在这里查看Sencha fiddle

此功能将创建存储并返回。

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

例如，我有一系列商店。它包含storeId或别名。

var storeArry = [],
    store = '';

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

在每个商店回调中，我们可以从storeArray中删除数据或维护变量以进行检查。

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

如何等待所有商店加载到ExtJs？

7 个答案: