Как центрировать маску на панели при рендеринге

Question

У меня есть простой сценарий, когда панели требуется замаскированный индикатор загрузки поверх нее во время загрузки содержимого. У меня маска работает нормально, используя следующий код, но индикатор загрузки появляется вверху при первом вызове. При вызове его после показа панели, т.е. при событии кнопки маска отображается правильно в центре панели. Есть идеи?

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

Похоже, что маска применяется к панели до того, как HTML будет полностью отрисован. Простым решением было отложить маску незадолго до ее применения.

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

Answer 2

Просто вызовите this.el.mask () из слушателя 'render'. Также проверьте свойство this.rendered перед вызовом маски в методе this.load.