Add mask to tabpanel on grid sort (extjs)

Question

I'm working on an internal extjs 4 project. I have a viewport with tabpanel. Each tab has an associated grid with MANY records. When a user sorts, the column headings are still accessible and they can initiate a new sort while the first is still processing. I'd like to add a mask to either the tabpanel or full viewport while the sort is still in progress. Is there an easy solution to this? Sorry, I cannot post any code here as it's on our intranet.

Thanks

Answer 1

This is quite easy. Run this code while your records are being sorted:

var loadmask = new Ext.LoadMask(Ext.getBody(), {msg:"Sorting..."});
loadmask.show();

Note that Ext.getBody() could be substituted by another element, whatever you want, you should only keep in mind that Ext.LoadMask wraps element, so getBody(), getEl(), both work ...

Again, when your process is completed, simply use loadmask.hide()