`

extjs panel拖动

阅读更多
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
		}
		);
	}
);
分享到:
评论

相关推荐

    Ext.net实现GridPanel拖动行、上移下移排序功能DEMO

    对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...

    完成Ext 拖拽树后对新的树节点顺序进行保存

    在IT领域,拖拽功能是用户界面中常见的一种交互方式,尤其在数据可视化和管理工具中,例如ExtJS的树形组件(Tree)。本项目主要关注如何在完成拖拽操作后,更新并保存树节点的新顺序。ExtJS是一个强大的JavaScript库...

    Extjs主界面生成导航

    首先,需要拖拽一个Tree Panel到“west”占位符中,以便在主界面中显示导航菜单。 2. 建立“导航模型”:在Extjs中,我们需要建立一个模型来描述导航菜单的结构。在这里,我们建立了一个名为GNLBModel的模型,该...

    Extjs4实现两个GridPanel之间数据拖拽功能具体方法

    在ExtJS 4中实现两个GridPanel间的数据拖拽功能涉及到了ExtJS框架提供的丰富的组件和插件支持。拖拽功能让用户可以通过交互式地拖动界面元素来执行操作,如移动或复制数据项等。这里的主要知识点是使用ExtJS提供的...

    ExtJS入门教程(超级详细)

    例如,ExtJS提供的窗口(window)组件可以创建模态窗口和非模态窗口,对话框(dialog)组件则用于创建可拖拽和自定义大小的对话框。通过这些组件,可以非常方便地构建出功能丰富且具有良好用户体验的Web界面。 总之...

    extjs框架及教程

    EXTJS的核心特性包括可拖拽布局、数据绑定、强大的表格和树形视图、以及高度自定义的图表。 在"EXT JS"这一标签下,我们关注的是EXTJS框架的使用和学习。EXTJS 4.1.4是该框架的一个稳定版本,提供了大量的改进和新...

    EXTJS教材,教程

    在EXTJS教材和教程中,初学者会接触到EXTJS的核心组件之一——Grid Panel,这是一个功能强大的数据展示和操作工具。以下是对EXTJS Grid Panel的详细知识点解析: 1. **EXTJS Grid Panel的功能特性** - **丰富的...

    extjs 在线sql查询

    1. **ExtJS Grid Panel**: 这是ExtJS中的一个核心组件,用于展示数据表格。用户可能通过Grid Panel查看查询结果,并进行排序、过滤和分页。 2. **Data Store**: ExtJS的数据存储机制,用于缓存和管理服务器端获取的...

    ExtJS模拟windows桌面

    ExtJS中的Panel组件可以作为窗口的基础,通过监听和处理鼠标事件来实现这些行为。 3. **开始菜单和快捷方式**:开始菜单通常包含程序启动项、设置选项等。这可以通过创建自定义的ExtJS菜单和按钮来实现,每个菜单项...

    EXTJS 3[1].0 API中文文档

    5. **拖放功能**:EXTJS 提供了完整的拖放支持,使得用户可以轻松创建可拖动和可放置的元素,提升应用的交互性。 6. **可访问性**:EXTJS 遵循WCAG 2.0标准,提供了一套辅助功能,使有特殊需求的用户也能正常使用...

    基于Extjs的模态对话框

    5. 自定义内容:对话框内部可以包含各种Extjs组件,如`Ext.form.Panel`用于创建表单,`Ext.grid.Panel`用于显示数据网格等。例如: ```javascript items: [{ xtype: 'form', items: [{ xtype: 'textfield', ...

    extjs学习案例, 例子有 panel ,widow,tree,grid,form, store……

    它提供了一整套组件化的用户界面元素,包括Panel、Window、Tree、Grid、Form和Store等,这些都是ExtJS的核心组件。本文将详细讲解这些知识点,帮助无论是初学者还是有一定基础的学习者提升在ExtJS开发中的技能。 ...

    Extjs3.0 常用组件介绍及怎么安装开发利器Spket

    6. **Window(窗口)**: Window组件可以用来弹出浮动的对话框,支持拖动、最大化、最小化和关闭操作。 7. **Toolbar(工具栏)**: Toolbars通常位于Panel的顶部或底部,用于放置按钮、菜单、分割线等元素。 8. **...

    extjs实现jbpm工作流流程设计

    在设计过程中,EXTJS的图表组件如Ext.chart系列可以用来展示工作流状态和进度,而EXTJS的树形组件(Ext.tree.Panel)则适合用来表示流程的层次结构。例如,"zTreeStandard.gif"和"zTreeStandard.png"可能就是用于...

    extjs做的一个桌面应用系统

    EXTJS可以很好地实现这样的效果,通过其组件化的特性,可以构建出模仿桌面操作系统的界面,如任务栏、开始菜单、窗口拖拽等。 在EXTJS2.0中,开发者可以利用其强大的布局管理器,如fit布局、border布局等,来创建...

    Extjs树Demo

    在ExtJS中,树形结构是通过`Ext.tree.Panel`或`Ext.tree.View`来实现的,它们提供了丰富的配置选项和事件处理。 1. **创建树结构**:在ExtJS中,树的数据源通常是一个JSON对象或Store,其中包含了节点的信息,如ID...

    ExtJS面板学习笔记(带有运行效果)

    - `draggable`:如果设置为`true`,Panel可以被拖动,默认为`false`。 - `html`:Panel的主体内容。 - `id`:Panel的唯一标识符,方便通过ID访问Panel对象。 - `width`/`height`:Panel的宽度和高度。 - `title...

    Extjs生成主界面

    - 将容器转换为Panel,设置`xtype`为`panel`。 4. **左侧导航占位符**:对于大多数企业级应用而言,左侧通常会有一个固定的导航栏。 - **Region**:设置为`west`,表示位于Viewport的左侧。 - **StateId**:设置...

    extjs4 自己写的webdesktop小实例,更新中

    "视图"(View)则是用户看到的界面,由各种ExtJS组件构成,如面板(Panel)、窗口(Window)等;"控制器"(Controller)则用来协调模型和视图之间的交互,实现功能逻辑。 "webdesktop1.0"可能包含了以下关键部分: ...

Global site tag (gtag.js) - Google Analytics