Ext.Panel() 拖动效果

最新推荐文章于 2019-06-10 16:23:48 发布

caspar笔记

最新推荐文章于 2019-06-10 16:23:48 发布

阅读量248

点赞数

<!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>"
  });
 });