当前位置:首页 > 开发 > Web前端 > Ext > 正文

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

发表于: 2012-09-09   作者:wb1991wb   来源:转载   浏览次数:
摘要: <html> <head> <title>My JSP 'index.jsp' starting page</title> <link rel="stylesheet" type="text/css" href="ext3.4/resources/css/ext-al
 
<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>

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
<script type="text/javascript"> var chart1 = new FusionCharts("Column2D.swf", "ChId1",
TetrisGrid--Master、Dao 在线演示 源码下载 本实例基于ExtJs、GridPanel组件开发!Ext的Grid的功能
TetrisGrid--Master、Dao 在线演示 源码下载 本实例基于ExtJs、GridPanel组件开发!Ext的Grid的功能
本实例基于jquery官方框架、和jquery easyui官方UI框架编写,采用jquery.portal.js,jquery.cookie.j
本实例基于jquery官方框架、和jquery easyui官方UI框架编写,采用jquery.portal.js,jquery.cookie.j
//声明: MoveWindow( hWnd: HWND; {窗口句柄} X, Y: Integer; {位置} nWidth, nHeight: Integer; {
AChartEngine 是一个安卓系统上制作图表的框架,目前它支持如下的图表类型: •line chart (折线图)
AChartEngine 是一个安卓系统上制作图表的框架,目前它支持如下的图表类型: •line chart (折线图)
AChartEngine 是一个安卓系统上制作图表的框架,目前它支持如下的图表类型: •line chart (折线图)
本人在网上找的比较好的放大局部图片效果的js代码 一、图片放大前预览效果(图片越清晰,放大后就会
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号