Ext.Panel() 拖动成效 _Web前端

Ext.Panel() 拖动效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Panel拖动</title>
		<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
		<!-- ** Javascript ** -->
		 <!-- ExtJS library: base/adapter -->
		<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
		<!-- ExtJS library: all widgets -->
		<script type="text/javascript" src="ext/ext-all.js"></script>
		<script type="text/javascript" src="panelDraggle.js"></script>
	</head>
	<body>
	</body>
</html>

?panelDraggle.js

?Ext.onReady(function(){
??
??var myPanel = new Ext.Panel({
???renderTo:Ext.getBody(),
???title:'可拖动Panel',
???x:100,y:100,
???width:500,height:150,
???floating:true,
???//圆角
???frame:true,
???//拖动
???draggable:{
????//拖动时不虚线显示原始位置
????insertProxy:false,
????onDrag:function(e){
?????var pel = this.proxy.getEl();
?????this.x = pel.getLeft(true);
?????this.y = pel.getTop(true);//获取拖动时panel的坐标
?????
?????var s = this.panel.getEI().shadow;
?????if(s){
??????s.realign(this.x,this.y,pel.getWidth(),pel.getHeight());
?????}
????},
????endDrag:function(e){
?????this.panel.setPosition(this.x,this.y);
????}
???},
???tools:[
????{id:'close'},
????{id:'minimize'},
????{id:'maximize'},
????{id:'restore'},
????{id:'gear'},
????{id:'pin'},
????{id:'unpin'},
????{id:'right'},
????{id:'left'},
????{id:'up'},
????{id:'down'},
????{id:'refresh'},
????{id:'minus'},
????{id:'plus'},
????{id:'help'},
????{id:'search'},
????{id:'save'},
????{id:'print'}
????
???],
???html:"从左右到依次为：<br />" +
?????"close,minimize,maximize,restore,gear,pin,unpin,right,left,up,down,<br />" +
?????"<div style='float:right'>refresh,minus,plus,help,search,save,pring</div>"
??});
?});