How to center a mask in a Panel when rendering

Question

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?

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');
    }
});

Answer 1

It appears the mask is applied to the panel before the html has been rendered completely. A simple solution was to delay the mask shortly before applying it.

render: function(comp) {
    setTimeout(function() { comp.loadPermissions(); }, 100);
}

Answer 2

Just call this.el.mask() from 'render' listener too. Also check this.rendered property before calling the mask in this.load method.