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

最新推荐文章于 2021-05-30 18:37:00 发布
最新推荐文章于 2021-05-30 18:37:00 发布
阅读量153 收藏
点赞数
分类专栏： Extjs开发 javascript 文章标签： Panel div 大小 javascript 放大 ViewUI 
<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.οnresize=mydiv_resize;
				function change(){
					mydiv1.style.width=document.body.clientWidth;
				    mydiv1.style.height=document.body.clientHeight;
					;
				}
			</script>
	</body>
</html>
wbdaodao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用 onresize 事件，实现页面大小随浏览器窗口变化
Sun_blog
12-14 3591
利用 onresize 事件，实现页面大小随浏览器窗口变化
vue可调整大小的div_vue实现div可拖动位置也可改变盒子大小的原理
weixin_36335903的博客
12-31 2552
以下是效果图：实现了div盒子在固定区域的拖动，也可改变盒子的高度和宽度，当超出边距后无法继续改变大小这里说一下大致原理：拖动和改变大小是分开来操作的，接下来分别说一下盒子拖动这里用到了js的三个鼠标事件，分别是onmousedown(鼠标按下)、onmousemove(鼠标移动)以及onmouseup(鼠标松开)，大致流程就是鼠标按下拖动图标进行拖动时，动态获取当前div的left和top再重新...
Extjs自动最大化panel
12-11
类似extjs中viewport的panel viewport只能渲染到body,而这个panel可以渲染到任何html元素,并且这个panel会自动变大!自动填充到最大化
extjs3.3.0图片放大缩小实现
centre10的专栏
09-03 5379
extjs3.3.0图片放大缩小实现 鼠标前后滚动实现图片的放大和缩小预览。 继承ext.panel实现自己的图片预览类imagePreview: imagePreview.js /**  * 继承Panel组件，用于图像预览  *  * @author cent
Extjs 查看图片并添加放大缩小功能
Jessie_D的专栏
04-24 3006
Ext.define("App.view.ImgView", { extend : "Ext.panel.Panel", width:800, height: 740, img_index: 0, layout: 'border', buttonAlign:'center', set_img: function(index) { this.img_index=index; this.up('win
jQuery实现鼠标拖动div改变位置、大小
As_zyh的博客
04-08 3519
实现类似windows窗体的效果，在中间拖动改变div位置，在边缘拖动改变div大小，鼠标在相应的位置改变成相应的形状 $(".test1").mousemove(function(e){ $(".test1").unbind("mousedown"); $(".test1").css("cursor","default"); //$("span > b").text(parseInt($("div"
html图片自动在div里放大,HTML5+CSS3实现图片的放大/缩小
weixin_33374585的博客
05-30 4926
原标题：HTML5+CSS3实现图片的放大/缩小 最近做项目时，经常遇到需要图片缓慢放大的效果。我做的时候想到了几种方法，所以来总结一下。1、 利用css改变图片的宽高，做出视觉上的放大。首先，将图片写入html页面中，给定宽高。 箭头所指向的就是我们需要变化的图片。我们需要给定图片父级盒子的宽高，如上图。Tips:transition用于设置四个过渡属性。这四个属性分别为： 这个属性要设置在做动...
ECharts图表自适应浏览器窗口大小（可随浏览器窗口的放大缩小而自适应）
weixin_44283571的博客
09-03 3836
2020年9月3 今天在制作ECharts图表时遇到一个问题，需要在一个页面里放入十个ECharts图表，使用的是vue框架进行制作，为了避免在一个文件里写入过多的代码，于是每一个ECharts图表我都单独的写到另一个文件里，再通过组件的形式插入到主文件里。 但是在制作折线图时因为这三个折线图在浏览器窗口里占的比例比较大，所以我就希望这些折线图能够在浏览器窗口缩放时进行自适应。 **1.**当只有一个图表需要进行自适应时 // 使用刚指定的配置项和数据显示图表。 this.myChart
ExtJS大小随浏览器窗口大小调整自适应
June Blog
09-05 3318
第一种情况：Panel里嵌套两个panel可以设置layout为vbox，然后在item配置里，可以用flex:来指定两个子panel的比例大小。 [code="js"]Ext.define('My.view.b.Main', { extend: 'Ext.panel.Panel', alias: 'widget.bmain', //height:'100%...
ExtJS中将div内容放到panel中contentEl与renderTo
MrtangLCX的博客
02-05 502
contentEl是将div内容放到panel中，然后对panel进行布局 可以将网页头部内容在div写好后 通过contentEl放到Panel中，然后对panel进行布局 renderTo 是将panel内容放到div中 网页头部如果用renderTo写的话就在panel中加 html : '<table></table>', 将html中的代码写好放到div中 这样...
Ext TreePanel:根据窗口大小变化调整自身大小
退步原来是向前
04-11 4528
近来做个项目，使用了Ext的TreePanel来生成树视图，当窗口很小时，TreePanel只能在很小的区域显示，此时树视图出现滚动条，但是当窗口全屏时，此时TreePanel还是在以前的那个小区域显示，如下图： 看了一下源码，这种情况是因为ext在生成TreePanel时指定了它的高度为固定的值比如100px。怎么解决这个问题？需要引入Ext的windowresize事件Ex
div盒子内布局不随页面大小改变而改变，html该怎么实现
最新发布
06-03
可以使用固定宽度和高度的方式来防止 div 盒子内布局随页面大小改变而改变。可以通过以下两种方式实现： 1. 使用固定像素值的宽度和高度 可以通过 CSS 中的 width 和 height 属性来设置固定像素值的宽度和高度。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值