title: Loading indicator on store loading
body: <p>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..</p>
  
  <p>Here is my code:</p>
  
  <pre><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:
                              '&lt;div class="myContent"&gt;' +
                              '&lt;div&gt;{name}&lt;/div&gt;' +
                              '&lt;/div&gt;',
                          store: 'MainStore',
                          disclosure: true,
                          store.on({
                              load: {
                                  fn: function( store ) {
                                      Ext.Viewport.setMasked(false);
                                  },
                                  scope: this,
                                  single: true
                              }
                          });
                          store.load();
                      }
                  ]
              }
          ]
      }
  });
  </code></pre>
  
  <p>My requirement is to display indicator while loading data from store and remove it after the list have all data from store.</p>