Панель маски ExtJS во время выполнения действий
Вопрос
У меня есть панель Ext west из моего окна просмотра, и у меня есть обработчик кнопки, который сначала удаляет все элементы с запада, затем рекламирует другой элемент, а затем выполняет doLayout (). Таким образом, есть 3 вещи, которые эта функция делает по нажатию кнопки. Я хочу добавить маску на западную панель, когда кнопка нажата, и снимите маску после того, как все 3 задачи будут выполнены.
Вот панель:
{
region: 'west',
id: 'west-panel',
title: 'West',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
layout: 'fit'
items: [leftMenu]
}
И вот как я делаю задачи:
west.removeAll();
west.add(indexHeaderPanel);
west.doLayout();
Возможно ли это? Я дам больше информации, если спросят. Спасибо.
Решение
Вы буквально просто делаете mask () и затем unmask () до и после своего блока кода. Если что-то в вашем коде выполняется асинхронно, то вы просто должны убедиться, что снятие маски выполняется в соответствующем обратном вызове. Как пример:
buttons: [{
text: 'Refresh West Panel',
handler: function(){
var w = Ext.getCmp('west-panel');
w.getEl().mask();
w.removeAll();
w.add(indexHeaderPanel); // assuming you have this ref!
w.doLayout();
w.getEl().unmask();
}
}]
Если ваша логика выполняется достаточно быстро, вы никогда не увидите маскировку. Чтобы убедиться, что это работает, вы можете установить задержку теста:
buttons: [{
text: 'Foo',
handler: function(){
var w = Ext.getCmp('west-panel');
w.getEl().mask();
// do whatever
(function(){
w.getEl().unmask();
}).defer(1000, this);
}
}]
w.getEl (). [un] mask () замаскирует всю панель (включая верхний / нижний колонтитулы). Чтобы замаскировать только содержимое, выполните w. body . [Un] mask ().