Ext.get('myPanel').el.setOpacity(0.65) is not working in IE 8 compatibility mode

Question

I'm trying to set opacity for extjs (4.2.1) panel (whose id is myPanel) as Ext.get('myPanel').el.setOpacity(0.65). It works fine in firefox and chrome but not in IE 8. The ultimate goal is to make the panel transparent so that the user can see through it. Could any one please help me with this...

Answer 1

Finally..after breaking my head for as while..I came up with 2 solutions... 1) Apply x-panel-ghost (which is an extjs in build css applied during the drag process) for baseCls or componentCls gave the transparency. But all the other default css for a extjs panel are lost and so we have to manually write them up.. 2) The best solution would be to set an image which is made transparent (through photoshop or something) as a background image for the panel header and body and apply it to the cls config of the panel as below:

In panel: cls: 'transparency',

In css file:

.transparency .x-panel-header{
background: transparent url('../image.png') no-repeat center !important;
}

And in the same way, for the body as well..

Hope this helps someone...

Answer 2

Ext will simply apply the CSS property "opacity" or alpha transparency to an HTML element. In IE8 this is almost in no case supported.

You could however use a plugin or hack to make IE 8 compatible with it.

Check http://css3pie.com/ or http://modernizr.com/ for example.

Also check http://www.electrictoolbox.com/opacity-internet-explorer-css3-pie-alpha-transparency/ for an example of your issue, and how it is solved using PIE

---

When you dont want to use 3rd party plugins, you can also try this:

Add the following rules to the CSS of your property

/* IE8 */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */ filter: alpha(opacity=50);

You can also do this with Ext.js using Ext.get('myPanel').el.setStyle() e.g.

Ext.get('myPanel').el.setStyle('-ms-filter','progid:DXImageTransform.Microsoft.Alpha(Opacity=50)');