Я пытаюсь применить ext.getBody.loadmask()
к событию изменения панели вкладок следующим образом:
listeners : {
beforetabchange : function( tabPanel, newCard, oldCard){
Ext.suspendLayouts();
Ext.getBody().mask("please wait..");
},
tabchange : function( tabPanel, newCard, oldCard){
Ext.resumeLayouts(true);
Ext.getBody().unmask();
}
}
Но маска активируется без отладки после события tabchange, но если я отлаживаю, я могу видеть маску.
Я делаю сетевой вызов, например, загружаю сетку на другой вкладке после того, как происходит событие tabchange
Вы хотите демаскировать, когда сетка закончит загрузку? Учтите, что смена вкладки ничего не ждет.
Действие происходит слишком быстро, когда нет отладки, чтобы увидеть его в действии без отладки, вам нужно добавить задержку в 1 секунду.
Рабочий Образец скрипки
Ext.create('Ext.tab.Panel', {
title: 'Tab Panel',
width: 700,
renderTo: Ext.getBody(),
items: [{
title: 'tab1',
html: 'tab1 content'
}, {
title: 'tab2',
html: 'tab2 content'
}],
listeners: {
beforetabchange: function (tabPanel, newCard, oldCard) {
Ext.suspendLayouts();
Ext.getBody().mask("please wait..");
},
tabchange: function (tabPanel, newCard, oldCard) {
Ext.defer(function () {
Ext.resumeLayouts(true);
Ext.getBody().unmask();
}, 1000)
}
}
})
Но вы видите, что маска не активируется до события смены вкладки, если мы помещаем предупреждение в событие beforetabchange после маскирования, оно не показывает маску. Оно активируется только после смены вкладки
После некоторого исследования я не нашел простого решения. Поэтому я реализовал повторную активацию вкладки после того, как loadMask будет отрисован.
listeners: {
beforetabchange: function(me, newTab, oldTab)
{
if (newTab.rendered || me.renderMask)
{
delete me.renderMask;
return;
}
// Show loadMask
me.body.mask('Rendering...');
me.renderMask = true;
oldTab.hide();
// Activate tab again after event loop
setTimeout(() => me.setActiveTab(newTab), 0);
// Cancel activation
return false;
},
tabchange: function(me, newTab, oldTab)
{
// Hide loadMask
me.body.unmask();
}
}
Если вы не «видите» маску, это потому, что у браузера не было времени на перерисовку, поэтому цикл занятости мешает ему нарисовать маску на экране.