Changing the opacity of mask behind the modal window extjs4

Question

I want to change the opacity of mask behind the modal window. I want to make it opaque. And this is to be donw only for one window. Can someone tell me how I can do it? I tried

    this.getEl().setOpacity(1);
    this.mask.setStyle('opacity', 1);
    this.el.mask().setStyle('opacity',1);

I tried these three codes but none of them worked.

score 3 · Accepted Answer · answered Jul 08 '14 at 11:43

3

had similar requirement, used domQuery to get 'x-mask' el and added css to change the opacity.

eg., window's on show..

show: function(win) {
            if (this.modal) {
                var dom = Ext.dom.Query.select('.x-mask');
                var el = Ext.get(dom[0]);
                el.addCls('customWinMask'); //remove on hide
            }
}

CSS:

.customWinMask.x-mask {
        filter: alpha(opacity=50);
        opacity: .5;
        background: blue !important; 
}

working fiddle: https://fiddle.sencha.com/#fiddle/7fu

answered Jul 08 '14 at 11:43

newmount

1,921
1
12
10

Hey Thank you :) It worked for me but I had to get the sixth elemnt of dom, var dom = Ext.dom.Query.select('.x-mask'); var el = Ext.get(dom[6]); el.setStyle('opacity',1); – user2316489 Jul 08 '14 at 12:57
hey so I used the above code, but for the window there is again a confirmation window coming up, so what happens is when confirmation window is shown, the previous window gets hidden behind the mask, the ideal scenario is we should be able to see the confirmation windowand the previous window both, but when we press yes on confirmation window, it should close the previous window and we should be able to remove the mask. – user2316489 Jul 08 '14 at 13:34

score 1 · Answer 2 · answered Jul 22 '14 at 16:09

So, the above code dint work for me completely. I had to use the followinf modification to it,

 show: function(win) {
           if (this.modal) {
                     var dom = Ext.dom.Query.select('.x-mask');
                     for(var i=0; i<dom.length;i++){
                         Ext.get(dom[i]).setStyle('opacity',1);
                     }
           }
},


 close:  function(win) {
                 if (this.modal) {
                     var dom = Ext.dom.Query.select('.x-mask');
                     for(var i=0; i<dom.length;i++){
                         Ext.get(dom[i]).setStyle('opacity',0);
                     }
                 }
}

score 0 · Answer 3 · answered Jun 09 '15 at 09:45

0

user2316489, you should change opacity from 1 to 0.5 for example:

this.getEl().setOpacity(0.5); this.el.mask().setStyle('opacity',0.5);

answered Jun 09 '15 at 09:45

Eva Noguerola

11
2

score 0 · Answer 4 · answered Oct 21 '15 at 10:14

0

You can use the sass variables for Ext.LoadMask, for example:

$loadmask-opacity:0.3;
$loadmask-page-opacity:$loadmask-opacity;

Rules on ExtJs v6.0

answered Oct 21 '15 at 10:14

score 0 · Answer 5 · answered Feb 12 '16 at 17:35

0

Go to sass > etc > all.scss and put this code:

.x-mask {
    opacity : 0.3
}

It worsk perfecty in extjs 6.0

answered Feb 12 '16 at 17:35

Albanir Neves

183
2
10

Changing the opacity of mask behind the modal window extjs4

5 Answers5