title: How to center a mask in a Panel when rendering
body: <p>I have a simple scenario where a panel needs a masked loading indicator over it while its loading the content. I have the mask working fine using the following code but the loading indicator appears at the top when calling it the first time. When calling it after the panel is shown, ie. on a button event, the mask appears correctly in the center of the panel. Any ideas?</p>
  
  <pre><code>var pnl = new Ext.Panel({
      title: 'test',
      width: 500,
      height: 500,
      renderTo: 'controls',
      listeners: {
          render: function(comp) {
              comp.load();
          }
      },
      load: function() {
         this.el.mask('loading...', 'loadingMask');
      }
  });
  </code></pre>