extjs - すべてのストアがExtJsにロードされるまで待つ方法は?

Question

5 つのストアによって駆動される一連のコンボボックスがあり、すべてのストアが完全にロードされたら関数を起動したいと考えています。これを行うための推奨される方法は何ですか? 私はこのようなことをすることができますが、それはぎこちなく感じます:

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
}

score 25 · Accepted Answer

メソッドを使用してください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
    }
}

score 8 · Accepted Answer

タイムアウトを使用することは優れたソリューションではありませんが、ストアマネージャーのすべてに依存しなければならないことも優れていません。

私は次のようなことをします：

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
}

あなたがそれをたくさん使っているなら、それをクラスに変えることさえできます。

score 2 · Accepted Answer

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

score 2 · Accepted Answer

Extend the store - add the 'loaded' property to the child class, override 'initComponent()' and attach to 'load' event inside it, raise the 'loaded' to true inside the event handler, add the 'isLoaded()' method returning value of the 'loaded' property.

Other way, if you use http transport - store.proxy.conn.isLoading()

Take a look at this

score 2 · Accepted Answer

ストアのロードに時間がかかりすぎるとコンボボックスが適切に表示/更新されないために問題が発生した場合、解決策は、このようなコンボボックスで使用されるすべてのストアを作成することです

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

コンボボックスは、読み込まれた情報を更新するために使用するストアでそのパラメーターをチェックしますが、ストアの読み込みが開始され、「読み込み中」フラグが true に設定される前であっても、コンボボックスが作成および更新され、更新されないことがあります。ストアの読み込みが終了したときの値。true に設定すると、問題が明示的に修正されます。それがあなたの場合かどうかはわかりませんが、そうである場合に備えて言及したいと思います。

score 1 · Accepted Answer

ExtJs Store にはメソッドloadがあり、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 - すべてのストアがExtJsにロードされるまで待つ方法は?

7 に答える 7

Related

Reference