Search code examples
javascriptcssextjsextjs4

Extjs 4 Ext.getBody().mask() - Make this particular mask transparent

I am trying to create an ExtJS 4 mask which is transparent with no loading message in only one place.

Ext.getBody().mask(); 
<do something.....>
Ext.getBody().unmask();

The above code gives a mask without any loading message but still the mask is visible. I want to make it transparent. I tried to add another cls to it something like:

Ext.getBody().mask(false, 'myMask');
CSS
.myMask { background-color: transparent; opacity: 0; }

But it didn't work. :(

Also tried Ext.LoadMask but the loading message box appears even when no message is set.

Please help. Thanks in advance!

Solution

  • the myMask class is applied to the loading message but not to the mask element.You need to use following css:

    .x-mask {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); // for older browsers
opacity: 0;
background: transparent;
}

    EDIT:

    To do it for a paritcular case. We need to add a class to body & remove that class while unmasking. 

    Ext.getBody().addCls('transparentMask'); 
Ext.getBody().mask(); 
<do something.....>
Ext.getBody().unmask();
Ext.getBody().removeCls('transparentMask');

    CSS:

    .transparentMask .x-mask {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); // for older browsers
opacity: 0;
background: transparent;
}