extjs - एक्सटीजे में सभी स्टोर्स लोड होने तक कैसे प्रतीक्षा करें?




(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
}

स्टोर को बढ़ाएं - 'लोड' संपत्ति को बाल वर्ग में जोड़ें, 'initComponent ()' को ओवरराइड करें और इसके अंदर 'लोड' ईवेंट से संलग्न करें, ईवेंट हैंडलर के अंदर 'लोड' को सही में बढ़ाएं, 'isLoaded ()' जोड़ें 'लोड' संपत्ति के विधि वापसी मूल्य।

अन्यथा, यदि आप http transport - store.proxy.conn.isLoading () का उपयोग करते हैं

this पर एक नज़र डालें


एक्सटीजे स्टोर में विधि load और लोड विधि में कॉलबैक फ़ंक्शन है।

मैंने एक डेमो बनाया है। आप यहां सेन्चा बेवकूफ की जांच कर सकते हैं

यह फ़ंक्शन स्टोर और वापसी करेगा।

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

यदि आपको कोई समस्या है क्योंकि स्टोर्स लोड होने में बहुत लंबा समय लेते समय कम्बोबॉक्स ठीक से प्रदर्शित / ताज़ा नहीं होते हैं, तो समाधान हर स्टोर को बनाना होता है जिसका उपयोग इस तरह के कंबोबॉक्स में किया जाना है

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

Comboboxes उस स्टोर में पैरामीटर की जांच करता है जो वे लोड होने के बाद जानकारी को रीफ्रेश करने के लिए उपयोग करते हैं, लेकिन कभी-कभी कंबोबॉक्स बनाया जाता है और स्टोर लोड होने से पहले भी ताज़ा किया जाता है और 'लोडिंग' ध्वज सत्य पर सेट होता है, और फिर यह रीफ्रेश नहीं होगा जब स्टोर लोड हो जाता है तो इसका मूल्य। इसे सही पर सेट करना इस मुद्दे को स्पष्ट रूप से ठीक करता है। मुझे नहीं पता कि यह आपका मामला है, लेकिन मैंने सोचा कि अगर मैं ऐसा करता हूं तो मैं इसका उल्लेख करूंगा।


store.isLoading() विधि का उपयोग करें, मुझे लगता है कि यह वही है जो इसके लिए है। मैं इसका इस्तेमाल करता हूं और यह ठीक काम करता है।

  1. storeId कॉन्फ़िगरेशन के साथ कुछ तर्क करने से पहले उन स्टोर को कॉन्फ़िगर करें जिन्हें आप लोड करना चाहते हैं।

  2. इन storeIds को एक सरणी में रखो।

  3. जब भी इनमें से एक स्टोर सरणी के माध्यम से फिर से लोड किया जाता है, तो Ext.getStore साथ स्टोर को Ext.getStore और कॉल isLoading पर isLoading रहा है।

  4. यदि सरणी में से कोई भी स्टोर अभी भी लोड नहीं हो रहा है, तो अपना तर्क करें।

उदाहरण के लिए, कहें कि मैं कुछ तर्क करने से पहले store1 और store2 लोड करना चाहता store1 (मैं इसे गैर-एमवीसी पैटर्न में दिखा रहा हूं क्योंकि ऐसा लगता है कि आप अपने स्निपेट से एमवीसी पैटर्न का उपयोग नहीं कर रहे हैं)।

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

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