Applying loadMask() to a single element in extjs?

Question

How to apply loadMask to only one element, and not the whole browser width-height?

default

Answer 1

Every component has it's own loadMask property. You can use it by calling YourComponent.setLoading. Here is fiddle to illustrate what I'm talking about.

Another way is using new Ext.LoadMask(YourComponent.el, {msg:"Please wait..."});. You can look at usage in my fiddle.

UPDATE

Here is code example which shows how to apply ExtJS4 loadMask and MessageBox to specified Widget

Ext.create('Ext.panel.Panel', {
    width: 600,
    height: 400,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'West Region is collapsible',
        region:'west',
        xtype: 'panel',
        width: 400,
        id: 'west-region-container',
        layout: 'fit'
    },{
        title: 'Center Region',
        region: 'center',
        xtype: 'panel',
        layout: 'fit',
    }],
    renderTo: Ext.getBody()
});
var myMask = new Ext.LoadMask(Ext.getCmp('west-region-container').el, {useMsg: false});
myMask.show();
var msg = Ext.Msg.show({
    title:'Save Changes?',
    msg: 'Bla-Bla',
    buttons: Ext.Msg.OK,
    modal: false
});
msg.alignTo(Ext.getCmp('west-region-container').el, 'c-c');

And here is try-it-yourself example.