(此方法在chrome下无效,另外找到一种方法对ff,ie,chrome都可用，在后面介绍)最有效的方法是先在要显示div的地方显示一个iframe，这个iframe的大小要和div一样大,然后在iframe上显示div。
IE中对iframe的src没有要求，留空都可以。Firefox中一定要加载一个页面，且此页面中必须存在body标签，并且要设置body的背景颜色,如：
<body style=”background:#fff”></body>
在extjs中实现一个弹出confirm且不被applet挡住：
appletIframe = new Ext.Window({
autoCreate : true,
title:'',
resizable:false,
constrain:true,
constrainHeader:false,
minimizable : false,
maximizable : false,
stateful: false,
modal: true,
shim:true,
buttonAlign:"center",
width:253,
height:105,
minHeight: 80,
plain:true,
footer:false,
header:false,
border:false,
baseCls:'',
html:'',
closable:false
});
appletIframe.show();
extConfirmWindow = Ext.MessageBox.confirm("请确认",'是否接受?', confirmHandle);
Using IFrame Shim to (partly) cover a Java applet(对ff,ie,chrome都可用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <body> <script type="text/javascript"> function mouseIn() { // create an iframe at the exact same position and // size as the sub div // Google "iframe shime" for more information var shimmer = document.createElement('iframe'); shimmer.id='shimmer'; shimmer.style.position='absolute'; // normally you would get the dimensions and // positions of the sub div dynamically. For demo // purposes this is hardcoded shimmer.style.width='150px'; shimmer.style.height='80px'; shimmer.style.top='100px'; shimmer.style.left='80px'; shimmer.style.zIndex='999'; shimmer.setAttribute('frameborder','0'); shimmer.setAttribute('src','javascript:false;'); document.body.appendChild(shimmer); // make sub div visible var sd = document.getElementById('subdiv'); sd.style.visibility='visible'; } function mouseOut() { var sd = document.getElementById('subdiv'); sd.style.visibility='hidden'; var shimmer = document.getElementById('shimmer'); document.body.removeChild(shimmer); } </script> <style type="text/css"> #maindiv {display:block; width:150px; height:80px; background:red;} #subdiv {display:block; width:150px; height:80px; background:blue; position:absolute; top:100px; left:80px; z-index:1000; visibility:hidden;} </style> <!-- top level div --> <div id="maindiv" onmouseover="mouseIn();" onmouseout="mouseOut();"> <p>MAIN DIV</p> <p>move mouse here</p> </div> <!-- subdiv that gets shown when mouse hovers over top level div --> <div id="subdiv"> <p>SUB DIV</p> </div> <!-- java applet --> <applet style"border:1px solid blue;" codebase="http://java.sun.com/applets/jdk/1.4/demo/applets/Clock/" code="Clock.class" width="170" height="150"> </applet> </body> </html>
另外，把applet放在tabPanel里面后，如果来回切换tabPanel，applet会重新加载。这是因为tabPanel的默认hideMode是display，切换之后，applet所在的tab的style会加上”display:none”,切回来时会去掉这个style，这样就会导致applet重新加载。要避免这个问题，就要把hideMode改成”visibility”。有一个’offsets’的模式，但试过了不行。要注意的是，hideMode:”visibility”不是放在tabPanel中，而是放在它的每个item中：
//tabpanel
var tab = new Ext.TabPanel({
region:'center',
//renderTo:'center',
split: true,
resizeTabs:true,
deferredRender:false,
activeTab:0,
minTabWidth: 80,
autoDestroy: true,
tabWidth:120,
enableTabScroll:true,
autoScroll:true,
headerAsText:true,
anchor:'100% -150',
items:[{
contentEl:'center',
title: "Title",
id:'c001x',
hideMode:"visibility",
html:'html content',
autoScroll:true
}],
plugins: new Ext.ux.TabCloseMenu()
});
http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/