extjs panel拖动

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

原创最新推荐文章于 2019-06-10 16:23:48 发布 · 323 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs

extjs 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何利用Ext.js库创建一个具有多种功能的Panel组件，包括配置渲染方式、尺寸、标题、HTML内容、自动滚动、折叠功能、拖拽及定位等特性。


Ext.onReady(
	function() {
		new Ext.Panel(
		{
			renderTo:hello,
			width:400,
			height:300,
			title:"我是Panel",
			html:"",
			autoScroll:true,
			collapsible:true,
			tbar:[{text:"顶部按钮1",handler:function(){ Ext.MessageBox.alert("点击","顶部按钮1被点击")}{text:"顶部按钮2"}],
			bbar:[{text:"底部按钮1"},{text:"底部按钮2"}],
			draggable:{
				insertProxy:false,
				onDrag:function(e){
					var pel = this.proxy.getEl();
					this.x = pel.getLeft(true);
					this.y = pel.getTop(true);
					var s = this.panel.getEl().shadow;
					s.hide();
				},
				endDrag:function(e) {
					this.panel.setPosition(this.x,this.y);
				}
			},
			x:100,
			y:100,
			floating:true
		}
		);
	}
);