Loading indicator on store loading

Question

My store is taking time to load.so that i want to display a loading indicator while loading store data.Is there any function to know the list store is completely loaded or not? Please help me..I was searching for this long time..

Here is my code:

Ext.Viewport.setMasked({
    xtype: 'loadmask',
    message: 'Loading'
});

Ext.define('MyApp.view.Myview1', 
{
    extend: 'Ext.Panel',
    requires: ['Ext.List', 'Ext.util.JSON'],

    config: {
        layout: 'hbox',
        items: [
            {
                xtype: 'panel',
                layout: 'fit',
                flex: 1,
                items: [
                    {
                        xtype: 'list',
                        itemTpl:
                            '<div class="myContent">' +
                            '<div>{name}</div>' +
                            '</div>',
                        store: 'MainStore',
                        disclosure: true,
                        store.on({
                            load: {
                                fn: function( store ) {
                                    Ext.Viewport.setMasked(false);
                                },
                                scope: this,
                                single: true
                            }
                        });
                        store.load();
                    }
                ]
            }
        ]
    }
});

My requirement is to display indicator while loading data from store and remove it after the list have all data from store.

Naresh Tank · Answer 1 · 2013-10-08T11:58:42.030

0

You will have to bind load event to this store like below code

  Ext.Viewport.setMasked({
     xtype: 'loadmask',
     message: 'Loading'
   });

   store.on({
    load: {
         fn: function( store ) {
            Ext.Viewport.setMasked(false);
         },
         scope: this,
         single: true
    }
});

store.load();

edited Oct 08 '13 at 11:58

answered Oct 08 '13 at 08:59

Naresh Tank

1,569
10
23

I need more suggesion on this – almakki Oct 08 '13 at 11:16
can you post your code so I can give you more information.there is store means object of your store. – Naresh Tank Oct 08 '13 at 11:59
ok.. i posted the code i tried in the question itself.pls hav a look – almakki Oct 09 '13 at 03:50
http://stackoverflow.com/questions/11003605/how-to-wait-until-all-stores-are-loaded-in-extjs – almakki Oct 10 '13 at 05:54

score 0 · Answer 2 · answered Oct 10 '13 at 10:08

This one is simple, just like @Naresh Said

put load mask inside your function

  Ext.Viewport.setMasked({
            xtype: 'loadmask',
            message: 'Please Wait...'
        });

and disable loadmask after store loads

storectn.load({
                callback: function (records, operation, success, response) {
                    if (success==1) {
                       // Ext.Msg.alert('success');
                         Ext.Viewport.setMasked(false);
                    } else {
                       // Ext.Msg.alert('Failed');
                         Ext.Viewport.setMasked(false);


                    }
                }
            });

score 0 · Answer 3 · answered Mar 20 '14 at 19:12

Finally I have solved the problem :)

Sencha loads the store and list within a very short time but the UI takes long time to load. So, after finish loading the stores if you set a callback to remove indicator using setTimeout then the problem will be solved. Because when UI loading is finished it will call your final method, because JavaScript is a single thread language.

Ext.Viewport.setMasked({
     xtype: 'loadmask',
     message: 'Loading'
   });

   store.on({
    load: {
         fn: function( store ) {
            setTimeout(function(){
                Ext.Viewport.setMasked(false);
            }, 100);
         },
         scope: this,
         single: true
    }
});

store.load();

Here even though the setTimeout is supposed to be called after 100 milliseconds, it will wait for the UI to be loaded first and then be called.

If you are loading the store dynamically by a custom query with store.add(Record), then after loading all data you just call the setTimeout call. It will work as well.

score 0 · Answer 4 · answered Apr 24 '14 at 08:09

We need to setmask(prevent user interaction and show loading message) while loading data in sencha touch. Sencha touch setMasked(<>) gives option to add mask into containers. But every time we need to manually add the mask and remove the mask. Instant of this manually doing things we can use store listeners.

My requirement here is i have a one store for CRUD process. So every time when i try to sync and loading the data’s i want to setmask of the view. My store code is like the below.

I used beforeload, beforesync, load, metachange, removerecords, updaterecord, write, addrecords events for this task.

Please visit the below url for full source code by clicking the link. [Solved by solution]

http://saravanakumar.org/blog/2014/04/sencha-touch-setmask-display-load-mask-or-waiting-while-loading-data-in-store/

Loading indicator on store loading

4 Answers4