title: ExtJS 4 setting Loading mask for the viewport
body: <p>I'm trying ti set up a loading mask for my viewport, because it takes a lot of time to load it. I've tried this:</p>
  
  <pre><code>Ext.define('MY.view.Viewport', {
      extend: 'Ext.Viewport',
      alias: 'widget.dispviewport',
  
      initComponent: function() {
          var me = this;
          var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
  //      myMask.show();
          Ext.apply(me, {
              id : 'main-viewport',
              listeners: {
                  beforerender: function() {
                      myMask.show();
                  },
                  afterrender: function() {
                      myMask.destroy();
                  }
              },
              renderTo: 'id-sym-container',
              layout: {...
  </code></pre>
  
  <p>but it seems that I never get into <code>beforerender</code>. I tried with <code>console.log</code> in the <code>beforerender</code> function and it also doesn't appear. When I try like this:</p>
  
  <pre><code>Ext.define('MY.view.Viewport', {
      extend: 'Ext.Viewport',
      alias: 'widget.dispviewport',
  
      initComponent: function() {
          var me = this;
          var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
          myMask.show();
          Ext.apply(me, {
              id : 'main-viewport',
              listeners: {
  //              beforerender: function() {
  //                  myMask.show();
  //              },
                  afterrender: function() {
                      myMask.destroy();
                  }
              },
  </code></pre>
  
  <p>it works but my mask is showing way too late. Am I using <code>beforerender</code> wrong way and what's the way to start <code>myMask</code> exactly when my <code>Viewport</code> starts to render?</p>
  
  <p>Thanks</p>
  
  <p>Leron</p>