web-dev-qa-db-ja.com

すべてのストアがExtJにロードされるまで待つ方法は？

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
}
extjs
31
Greg Finzer

store.isLoading() メソッドを使用します。それが目的だと思います。私はそれを使用し、それはうまく動作します。

  1. storeId構成を使用してロジックを実行する前に、ロードするストアを構成します。

  2. これらのstoreIdsを配列に入れます。

  3. これらのストアの1つが配列を介して繰り返されるたびに、Ext.getStoreでストアを検索し、isLoadingを呼び出します。

  4. 配列内のストアがまだロードされていない場合は、ロジックを実行します。

たとえば、いくつかのロジックを実行する前に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
    }
}
24
Geronimo

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

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

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
}

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

7
Evan Trimboli

ストアの拡張-「loaded」プロパティを子クラスに追加し、「initComponent（）」をオーバーライドしてその中の「load」イベントにアタッチし、イベントハンドラー内で「loaded」をtrueに上げ、「isLoaded（）」を追加します'loaded'プロパティの値を返すメソッド。

他の方法、httpトランスポートを使用する場合-store.proxy.conn.isLoading（）

this を見てください

2
pacman

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

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

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

2
Triqui
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);
})
2
o_nix

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);
1
Narendra Jadhav

Deft JSを使用

Deft JSは、依存性注入を介して注入されるアドオンです。 AJAX呼び出しでプロミスを追加でき、呼び出しが完了したときにのみプロミスが解決されます。 Link for Deft JS 。UseExt.defer.All（）;5つのストアすべてをロードし、すべてのストアがロードされると特定のコールバック関数が呼び出されます。その関数で、ロジックを実装します。

1
Mano Aravindhan