ExtJS mask panel when performing actions
I have an Ext west panel from my viewport and I have a handler on a button that first removes all items from the west and then advertises another item and then does doLayout (). So there are 3 things this function does when the button is pressed. I would like to add a mask to the western pane when the button is clicked and will expose after all three tasks are completed.
Here is the panel:
{
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]
}
And this is how I do the tasks:
west.removeAll();
west.add(indexHeaderPanel);
west.doLayout();
Is it possible? I will ask for additional information. Thank.
source to share
You literally just do mask () and then unmask () before and after your block of code. If something in your code is executed asynchronously, you just make sure the mask is executed in the appropriate callback. As an example:
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();
}
}]
If your logic is fast enough, you will never see the masking. To make sure it works, you can set the test delay:
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 () will mask the entire panel (including the header / footer). To hide only the content, do w. body . [Un] mask ().
source to share