CODEWITHSUNDEEP
extjssencha-architectsencha-cmd
Sammy Cakes
Sammy Cakes

Reputation: 162

How to cover two overlapping components with a mask in Sencha ExtJS?

In Sencha, I'm able to mask a background component and bring up a dialog component nicely by calling this.view.mask() on the background component.

Then when I press "Submit" on the top dialog, I want to have a mask cover the dialog and background component all together instead of just masking the smaller dialog box. I don't want to just mask the dialog box, because even though the background is masked too, the dialog box's border is still obviously bright.

How can I mask both components all together?

On the dialog box I tried this.view.mask("Loading..."), but only the small dialog box is masked. Its border is still clearly bright so it's clear we're just putting a mask on the small dialog box rather than on the whole page.

I tried querying the background component via view=Ext.ComponentQuery.query('MyComponent')[0] and then using view.mask("Loading"), but this only adds the mask to that background component.

Upvotes: 0

Views: 258

Answers (1)

alex.butnar
alex.butnar

Reputation: 284

This is an ugly solution, but it worked for me. Tested on 7.0.0

var wnd = Ext.getCmp('window'), // just an example - Ext.getCmp() use is frowned upon :)
    wndSize = wnd.getSize(),
    myMask;

myMask = new Ext.LoadMask({
    msg    : 'Please wait...',
    target : wnd,
    height: wndSize.height,
    width: wndSize.width
});

myMask.show().setXY(wnd.getXY());

Upvotes: 1

Related Questions