<!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>"
});
});
分享到:
相关推荐
2. **确定新位置**:在`beforedrop`事件中,获取当前拖动节点和目标位置节点的信息,计算出新的节点顺序。 3. **更新数据源**:在`drop`事件中,根据新的位置信息,更新树数据源。这可能涉及在树数据模型中移动节点...
制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有...
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
8.3.6 为组件提供拖动功能:ext.util.componentdragger / 421 8.3.7 为组件实现动画功能:ext.util.animate / 422 8.3.8 其他的组件辅助功能类 / 423 8.4 组件的管理 / 423 8.4.1 组件管理及查询:ext....
在这个"EXT 控件拖动例子"中,我们将深入探讨EXTJS如何实现控件的拖放功能,以及如何在动态布局中运用这一特性。 EXTJS 提供了一个名为`Ext.dd.DragDrop`的接口,它使得在界面上的元素可以被拖动和放置。这个接口...
本文详细介绍了如何使用Ext JS框架实现从TreePanel到Panel的拖拽功能。通过深入分析代码示例,我们了解了整个实现过程的关键步骤。这种交互方式不仅能够提高用户界面的友好度,还能够使应用更加灵活多变,满足不同...
"基于EXT的div拖动"是指利用EXTJS这一强大的JavaScript框架来实现这种功能。EXTJS是一个用于构建富客户端Web应用的前端框架,它提供了丰富的组件库、数据绑定机制以及强大的布局管理,使得开发者可以方便地创建出...
var tree = Ext.create('Ext.tree.Panel', { store: treeStore, // 用于存储树节点的数据 rootVisible: false, // 是否显示根节点 ... }); ``` - 配置拖拽:通过`dragDropConfig`属性,我们可以启用拖放行为...
- `panel`:`Ext.Panel`,提供标题、边框、工具栏等功能的容器。 - `tabpanel`:`Ext.TabPanel`,分页容器,每个页签代表一个单独的面板。 - `treepanel`:`Ext.tree.TreePanel`,显示树形结构的数据。 - `flash...
var tree = Ext.create('Ext.tree.Panel', { ... viewConfig: { enableDD: true }, ddGroup: 'myDDGroup' }); ``` 2. **配置Grid接收拖放**:在Grid的配置中,我们需要设置`enableDrop`为`true`,同样定义`...
接下来将详细介绍文档中提到的几个核心概念,包括`Ext.MessageBox`、`Ext.Panel`、`Ext.Window`、`Ext.FormPanel`、`Ext.TabPanel`、`Ext.XTemplate`和`Ext.TreePanel`以及如何在Extjs中实现主题(换肤)功能。...
"ext三列拖动"是一个基于ExtJS框架实现的功能,主要涉及的是数据表格(Grid)中的列拖动功能。ExtJS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计,它提供了丰富的组件和API,使得开发人员可以方便...
根据提供的文件信息,“[深入浅出Ext.JS.徐会生&何启伟&康爱媛)第7——13章.pdf”,我们可以推测这是一本关于Ext JS框架的专业书籍的一部分,作者为徐会生、何启伟和康爱媛。由于实际的内容并未给出具体章节的信息,...
3. **适用范围**:Accordion布局主要应用于`Ext.Panels`以及所有`Ext.panel.Panel`子项中。 **配置参数详解:** - `title`: 面板的标题。 - `layout`: 指定为`'accordion'`来使用Accordion布局。 - `width`/`...
Ext.create('Ext.panel.Panel', { title: 'Accordion Layout', width: 300, height: 300, x: 20, y: 20, layout: 'accordion', defaults: { bodyStyle: 'padding:15px' }, layoutConfig: { ...
例如,`Ext.Panel`是框架中的一个核心组件,用于创建带有标题、边框和可选项卡的容器。`Ext.grid.GridPanel`则是一个数据展示组件,常用于表格数据的展示和操作。每个类都详细说明了其构造函数、配置选项、事件处理...
本资源为ExtJS4.1中文版API,是学习ExtJS4的得力助手,资源中用中文详细介绍各... Panel可以方便的被拖拽到任何容器Container或者布局中,并且布局和渲染的过程是完全由框架进行管理的 通过框架完全管理。 …………
在这个"一些关于EXT空间的案例"中,我们将探讨EXT在实现可编辑表格和可拖动表格等交互功能上的应用。 EXT的核心是其组件模型,它包括了各种各样的UI组件,如表格(Grid)、面板(Panel)、窗口(Window)等。在EXT...
`Ext.grid.Panel`则用于展示数据网格,可以自定义列、排序、过滤等功能。 在`Ext的学习文档.doc`中,你将会找到关于这些概念的深入解释和实际的代码示例。通过学习和实践,你将能熟练掌握如何利用Ext构建复杂、高...