Ext.get('myPanel')。el.setOpacity(0.65)在IE 8兼容模式下无效

时间:2014-02-18 14:09:33

标签: extjs transparency transparent ie8-compatibility-mode

我正在尝试将extjs(4.2.1)面板(其id为myPanel)的不透明度设置为Ext.get('myPanel').el.setOpacity(0.65)。它在firefox和chrome中运行良好,但在IE 8中不行。最终目标是使面板透明,以便用户可以透视它。任何人都可以帮助我...

2 个答案:

答案 0 :(得分:0)

Ext将简单地将CSS属性“opacity”或alpha透明度应用于HTML元素。在IE8中,这几乎不受支持。

然而,您可以使用插件或黑客来使IE 8与之兼容。

例如,请检查http://css3pie.com/http://modernizr.com/

同时检查http://www.electrictoolbox.com/opacity-internet-explorer-css3-pie-alpha-transparency/以查找问题的示例,以及如何使用PIE解决问题


当您不想使用第三方插件时,您也可以尝试:

将以下规则添加到您的媒体资源的CSS中

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

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

您也可以使用Ext.get('myPanel')对Ext.js执行此操作.el.setStyle() e.g。

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

答案 1 :(得分:0)

终于......在打破了我的脑袋之后......我想出了两个解决方案...... 1)对baseCls应用x-panel-ghost(在拖动过程中应用的构建css中的extjs)或componentCls给出透明度。但是extjs面板的所有其他默认css都丢失了,因此我们必须手动编写它们。 2)最好的解决方案是将一个透明的图像(通过photoshop或其他东西)设置为面板标题和正文的背景图像,并将其应用到面板的cls配置中,如下所示:

在小组中: cls: 'transparency'

在css文件中:

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

以同样的方式,身体也是如此..

希望这有助于某人...