ExtJS mask panel while actions are made

Question

I have an Ext west panel from my viewport and I have a handler on a button that first removes all elements from west then ads another element, then does a doLayout(). So there are 3 things this function does on the click of the button. I would like to add a mask to the west panel when the button is clicked and unmask after all 3 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 this possible ? I will give more informations if asked. Thank you.

Brian Moeskau Brian Moeskau · Accepted Answer · 2009-09-18T04:35:46

You literally just do mask() and then unmask() before and after your block of code. If something in your code executes asynchronously, then you just make sure that the unmask is done in an 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 executes quickly enough you'll never see the masking. To verify that it works you can put in a 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 header/footer). To mask only the contents, do w.body.[un]mask().

ExtJS mask panel while actions are made

1 Answers