Applying loadMask() to a single element in extjs

extjsextjs4loadmask

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

default
enter image description here

here, only one element is masked, and a messageBox is in center, inside this element and not the whole display…
enter image description here

any ideas?

EDIT:

@Molecule , thanks, but this is when data is loading from some source, what i need is :

{
    xtype:"button",
    text:"Alert",
    handler: function(){

        Ext.Msg.show({
        title:'Save Changes?',
        msg: 'You are closing ?',
        buttons: Ext.Msg.YES,
        setLoading: // here somehow only mask parent element, and position alertBox...
    }

}

Best Solution

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.

Related Question