【叨、校长】DIV大小随窗口改变、Ext Panel放丰功能的实现 _Web前端

【叨、校长】DIV大小随窗口改变、Ext Panel放大功能的实现
<html>
	<head>
		<title>My JSP 'index.jsp' starting page</title>
		<link rel="stylesheet" type="text/css"
			href="ext3.4/resources/css/ext-all.css" />
		<script type="text/javascript" src="ext3.4/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="ext3.4/ext-all.js"></script>
		<style type="text/css">
			#mydiv1{
				background:"#00ffff";
			}
		</style>
		<script type="text/javascript">
			Ext.onReady(function(){
				document.getElementById("mydiv1").innerHTML="";
				var p1=createP("mydiv1");
				document.getElementById("mydiv2").innerHTML="";
				createP("mydiv2");
				document.getElementById("mydiv3").innerHTML="";
				createP("mydiv3");
				document.getElementById("mydiv4").innerHTML="";
				createP("mydiv4");
				document.getElementById("mydiv5").innerHTML="";
				createP("mydiv5");
				document.getElementById("mydiv6").innerHTML="";
				createP("mydiv6");
				function createP(div){
					var p=new Ext.Panel({
						renderTo:div,
						title:"测试"+div,
						tools:[{
							id:"minimize",
							handler:function(a,b,c){
								c.setWidth(document.body.clientWidth/3);
								c.setHeight(document.body.clientHeight/2);
								document.getElementById("mydiv1").style.display="";
								document.getElementById("mydiv2").style.display="";
								document.getElementById("mydiv3").style.display="";
								document.getElementById("mydiv4").style.display="";
								document.getElementById("mydiv5").style.display="";
								document.getElementById("mydiv6").style.display="";
							}
						},{
							id:"maximize",
							handler:function(a,b,c){
								c.setWidth(document.body.clientWidth);
								c.setHeight(document.body.clientHeight);
								if(div=="mydiv2"){
									document.getElementById("mydiv1").style.display="none";
								}else if(div=="mydiv3"){
									document.getElementById("mydiv1").style.display="none";
									document.getElementById("mydiv2").style.display="none";
								}else if(div=="mydiv4"){
									document.getElementById("mydiv1").style.display="none";
									document.getElementById("mydiv2").style.display="none";
									document.getElementById("mydiv3").style.display="none";
								}else if(div=="mydiv5"){
									document.getElementById("mydiv1").style.display="none";
									document.getElementById("mydiv2").style.display="none";
									document.getElementById("mydiv3").style.display="none";
									document.getElementById("mydiv4").style.display="none";
								}else if(div=="mydiv6"){
									document.getElementById("mydiv1").style.display="none";
									document.getElementById("mydiv2").style.display="none";
									document.getElementById("mydiv3").style.display="none";
									document.getElementById("mydiv4").style.display="none";
									document.getElementById("mydiv5").style.display="none";
								}
							}
						}],
						width:document.body.clientWidth/3,
					    height:document.body.clientHeight/2,
					    html:"我是panel"
					})
					return p;
				}
			})
		</script>
	</head>
	<body style="overflow:hidden;">
		<div id="max_div" style="position:absolute;z-index:0;">
			<table cellspacing="0">
				<tr>
					<td id="mydiv1" vertical-align="middle" align="center" >
						<img src="images/loadmask.gif">
					</td>
					<td id="mydiv2" vertical-align="middle" align="center" >
						<img src="images/loadmask.gif">
					</td>
					<td id="mydiv3" vertical-align="middle" align="center" >
						<img src="images/loadmask.gif">
					</td>
				</tr>
				<tr>
					<td id="mydiv4" vertical-align="middle" align="center" >
						<img src="images/loadmask.gif">
					</td>
					<td id="mydiv5" vertical-align="middle" align="center" >
						<img src="images/loadmask.gif">
					</td>
					<td id="mydiv6" vertical-align="middle" align="center" >
						<img src="images/loadmask.gif">
					</td>
				</tr>
			</table>
		</div>
		<div id="max_div_up"  style="position:absolute;z-index:0;border:1px solid red"></div>
			<script type="text/javascript">
				var mydiv1=document.getElementById("mydiv1");
				var mydiv2=document.getElementById("mydiv2");
				var mydiv3=document.getElementById("mydiv3");
				var mydiv4=document.getElementById("mydiv4");
				var mydiv5=document.getElementById("mydiv5");
				var mydiv6=document.getElementById("mydiv6");
				var mydiv_resize=function(){
				    mydiv1.style.width=document.body.clientWidth/3;
				    mydiv1.style.height=document.body.clientHeight/2;
				    mydiv2.style.width=document.body.clientWidth/3;
				    mydiv2.style.height=document.body.clientHeight/2;
				    mydiv3.style.width=document.body.clientWidth/3;
				    mydiv3.style.height=document.body.clientHeight/2;
				    mydiv4.style.width=document.body.clientWidth/3;
				    mydiv4.style.height=document.body.clientHeight/2;
				    mydiv5.style.width=document.body.clientWidth/3;
				    mydiv5.style.height=document.body.clientHeight/2;
				    mydiv6.style.width=document.body.clientWidth/3;
				    mydiv6.style.height=document.body.clientHeight/2;
				}
				mydiv_resize();
				window.onresize=mydiv_resize;
				function change(){
					mydiv1.style.width=document.body.clientWidth;
				    mydiv1.style.height=document.body.clientHeight;
					;
				}
			</script>
	</body>
</html>