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

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

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

person Mark Clancy    schedule 20.01.2009    source источник


Ответы (2)


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

render: function(comp) {
    setTimeout(function() { comp.loadPermissions(); }, 100);
}
person Mark Clancy    schedule 20.01.2009
comment
Кажется, достаточно просто положить его в конец стека с таймаутом 4 мс - не в первый раз ext заставляет меня это делать, также раздражающие моменты doLayout работают с этим хаком :-) - person Splynx; 02.03.2014
comment
Ха - только что он вышел из строя на 4 мс, так что это не проблема стека - что делает его нереальным, я думаю ... буду исследовать дальше :-D - person Splynx; 02.03.2014

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

person Thevs    schedule 20.01.2009