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




(7)

मेरे पास कॉम्बो बक्से का एक सेट है जो पांच स्टोर्स द्वारा संचालित होता है और सभी स्टोर पूरी तरह लोड होने के बाद मैं एक फ़ंक्शन को आग लगाना चाहता हूं। ऐसा करने का अनुशंसित तरीका क्या है? मैं ऐसा कुछ कर सकता था लेकिन मुझे लगता है कि:

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
}

Answers

टाइमआउट का उपयोग करना एक अच्छा समाधान नहीं है, हालांकि स्टोर मैनेजर में सब कुछ भरोसा करना भी अच्छा नहीं है।

मैं कुछ ऐसा करूंगा:

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
}

यदि आप इसका बहुत उपयोग कर रहे हैं तो आप इसे कक्षा में भी बदल सकते हैं।


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

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

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


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

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

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


डेफ जेएस का प्रयोग करें

डेफ जेएस निर्भरता इंजेक्शन के माध्यम से इंजेक्शन एक एडन है। यह उपयोगकर्ता को AJAX कॉल में वादे जोड़ने की अनुमति देता है और कॉल केवल तभी हल किया जाता है जब कॉल किया जाता है। डेफ जेएस के लिए लिंकExt.defer.All () का उपयोग करें ; अपने सभी 5 स्टोर लोड करने के लिए और सभी स्टोर लोड होने के बाद एक विशेष कॉलबैक फ़ंक्शन कॉल किया जाएगा। उस समारोह में, अपने तर्क को लागू करें।


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

एक्सटीजे स्टोर में विधि 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.tip.Tip.prototype.minWidth को हटाने से मेरे लिए सभी मामलों (आईई 10 पर) समस्या ठीक नहीं होती है, और जोड़ना

if(Ext.isIE10) { 
      Ext.supports.Direct2DBug = true;
}

टूलटिप्स को ठीक करता है लेकिन अन्य अजीब समस्याओं का कारण बनता है (टूलबार बटन मार्जिन कभी-कभी प्रभावित होते हैं!)। मैंने देखा सबसे अच्छा समाधान है:

Ext.override(Ext.tip.QuickTip, {
        helperElId: 'ext-quicktips-tip-helper',
        initComponent: function ()
        {
            var me = this;


            me.target = me.target || Ext.getDoc();
            me.targets = me.targets || {};
            me.callParent();


            // new stuff
            me.on('move', function ()
            {
                var offset = me.hasCls('x-tip-form-invalid') ? 35 : 12,
                    helperEl = Ext.fly(me.helperElId) || Ext.fly(
                        Ext.DomHelper.createDom({
                            tag: 'div',
                            id: me.helperElId,
                            style: {
                                position: 'absolute',
                                left: '-1000px',
                                top: '-1000px',
                                'font-size': '12px',
                                'font-family': 'tahoma, arial, verdana, sans-serif'
                            }
                        }, Ext.getBody())
                    );

                if (me.html && (me.html !== helperEl.getHTML() || me.getWidth() !== (helperEl.dom.clientWidth + offset)))
                {
                    helperEl.update(me.html);
                    me.setWidth(Ext.Number.constrain(helperEl.dom.clientWidth + offset, me.minWidth, me.maxWidth));
                }
            }, this);
        }
    });

ऐसा लगता है कि आईई 9 और 10, क्रोम और फ़ायरफ़ॉक्स पर काम करता है।