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
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...
    }

}

@Chris, yes they are [Components](http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Component) :-) — Davor Zubak, Dec 07 '12 at 09:49

Molecular Man · Accepted Answer · 2011-07-21T14:31:17.700

29

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.

edited Jul 21 '11 at 14:31

answered Jul 21 '11 at 13:02

Molecular Man

22,277
3
72
89

6

And all components in ExtJS has at least an `el` property which is in fact an `Ext.Element` which is pointing to the wrapping div. As long as you can access this `el` element, you can always call up `.mask()` or `.unmask()` on this el, or any method defined in `Ext.Element`. – Lionel Chan Jul 21 '11 at 13:38
can one provide with simple example of Ext.Msg.show and loadNask??Please – Davor Zubak Jul 21 '11 at 13:45
@Ingol, of course. Take a look at this [fiddle](http://jsfiddle.net/molecule/pKq8X/2/) – Molecular Man Jul 21 '11 at 14:25
@Ingol, I've provided example of Ext.Msg.show and loadMask. And added it into my post – Molecular Man Jul 21 '11 at 15:39
Fiddle is broken, now. – boatcoder Nov 11 '14 at 21:55

Applying loadMask() to a single element in extjs?

1 Answers1

Linked