PDA

View Full Version : How to change the opacity of a panel when disabled?



murrah
26 Mar 2014, 3:38 PM
Hi,

I have a panel that I would like to be less transparent when disabled. So, I set the disabledCls in the panel config. Inspecting the dom shows the class being included but the injected masked div "overrules" my disabled class and I get a mixed effect.

.cux-disabled-panel {
opacity: .30 !important;
-moz-opacity: .30 !important;
filter: alpha(opacity=30) !important;
}

I can get the effect I want by not adding the disabledCls config to the panel and editing the dom so that this:
.x-mask {
background: none repeat scroll 0 0 #CCCCCC;
opacity: 0.5;
} becomes:
.x-mask {
background: none repeat scroll 0 0 #CCCCCC;
opacity: 0.3;
} ie manually change the opacity. x-mask is the class of the injected div that creates the mask.

So, how do I set the opacity for just that panel, rather than overriding the class for the whole app?

I guess I could set the style of the injected div after I disable the panel? Not a great way.

Thanks,
Murray

israelroldan
2 Apr 2014, 10:33 AM
Your class needs to be more specific:


.cux-disabled-panel .x-mask {
opacity: .30 !important;
-moz-opacity: .30 !important;
filter: alpha(opacity=30) !important;
}

Here's an example: https://fiddle.sencha.com/#fiddle/4np

murrah
2 Apr 2014, 1:11 PM
Thank you Israel! Works perfectly. =D>