你可以拖拽grid里的行,让它们按你的方式去排列。
你可以拖拽tree里的节点,把节点从一个枝干拖向另一个枝干。
grid和tree之间,也可以拖动。
layout的split也是一种拖动,改变布局的大小。
resize也算是拖动,改变大小。
一直认为拖动很复杂,可实际上只需要一条语句就可以了。
new Ext.dd.DDProxy('block');
然后看看html里的部分
<div id="block" style="background: red;"> </div>
如果不做任何标记,我们根本什么都看不到,所以我给加上了红色背景颜色。现在你可以乱拖了。
截图里的红条条可以随便拖,实际看例子吧。lingo-sample/1.1.1/07-01.html,2.0里用法一样,lingo-sample/2.0/07-01.html。
实际上我们刚才看到了DDProxy可以随便拖,另外一个DDTarget是不能拖动的,这东西是用来放DDProxy的一个区域。看一看继承体系图可能有助于我们的理解。
简单来说,左边都是可以随你的鼠标拖动的,拖动起来以后,直接把他们扔到右边那些定义好的区域就好了。proxy是可拖动对象,target是拖动的目的地。
在知道了是与非之后,我们要验证一下自己的理念了。
proxy是我们要拖来拖去的东西。
var proxy = new Ext.dd.DragSource('proxy', {group:'dd'});
target告诉用户,他应该把上边的proxy放到哪里
var target = new Ext.dd.DDTarget('target', 'dd');
注意到两者之中相同的dd了吗?这是个分组标志,咱们通过这个限制用户不会像第一节那样,把proxy乱扔到任何地方。只有相同组名的目的地才能接收它,好比你只能把超市货架上的商品放进篮子,而不能满地乱扔一样。
不过这也仅仅是拖拽而已,没有任何效果不是很不爽吗?让我们加入一些小技巧吧,可以让拖拽显得更神奇一些。
proxy.afterDragDrop = function(target, e, id) {
var destEl = Ext.get(id);
var srcEl = Ext.get(proxy.getEl());
srcEl.insertBefore(destEl);
};
这个函数是说,在dragdrop之后,会执行这个函数,然后通过id获得target,根据proxy.getEl()获得proxy,然后把proxy添加到target的前头,看起来是放在里边了。
好,脚本都组织好了,打开页面看看效果吧。
当然,为了让画面花花绿绿的,咱们加了不少css样式,稍微给你们看一下吧,省得那些不愿意交钱的人说咱们的截图是用photoshop画的。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>dd</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<style type="text/css">
HR {
clear: both;
visibility: hidden
}
.block {
border: 1px red solid;
margin: 10px;
min-height: 80px;
}
.item {
border: 1px green solid;
background: green;
float: left;
margin:10px;
width: 50px;
min-height: 50px;
text-align: center;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
var proxy = new Ext.dd.DragSource('proxy', {group:'dd'});
proxy.afterDragDrop = function(target, e, id) {
var destEl = Ext.get(id);
var srcEl = Ext.get(proxy.getEl());
srcEl.insertBefore(destEl);
};
var target = new Ext.dd.DDTarget('target', 'dd');
});
</script>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script>
<div id="proxy" class="item">item</div>
<hr />
<div id="target" class="block">
<hr />
</div>
</body>
</html>
好了,其实你也可以在lingo-sample/1.1.1/07-02.html看到咱们的例子。很高兴的是,lingo-sample/2.0/07-02.html跟它完全一样。
还有JsonView啦,DataView什么的,都可以拖,但渲染的时候更见方便,这些等于是Template和Store的一种结合体制。
分享到:
相关推荐
哪里都没有找到下载,就自己弄了下,...拖拽就像呼吸一样容易。 第 8 章 哭泣吧!现在才开始讲基础问题。 第 9 章 沉寂吧!我们要自己的控件 说在前头的 附录 A. 常见问题乱弹 附录 C. 后记
在本压缩包中,包含了第1至7章的习题解答与学习指导,帮助读者巩固和深化对课程内容的理解。 1. **电机基础**:电机是电力系统的核心设备,主要包括直流电机、交流电机(如感应电机、同步电机)等。学习电机基础,...
目录.bat 电机与拖动基础及MATLAB仿真课件 第0章 绪论.ppt ...电机与拖动基础及MATLAB仿真课件 第7章 电动机容量的选择.ppt fzsl01.m fzsl02.m fzsl03.m fzsl04.m fzsl05.m fzsl06.m 书中仿真实例Matlab程序代码.doc
电力拖动自动控制系统是工业生产中的重要组成部分,它主要用于...在学习第二章电力拖动自动控制系统的过程中,学生将深入理解这些概念,并通过实际案例分析和仿真练习来提升技能,为未来在相关领域的实践打下坚实基础。
在第五章的课程中,通常会深入探讨电力拖动系统的控制策略、系统分析以及关键组件的工作原理。 首先,我们要了解电力拖动系统的构成,它主要包括电源、电动机、传动机构和负载。电动机作为执行机构,通过改变供电...
在电力拖动自动控制系统交流部分的第六章中,主要讨论了基于稳态模型的交流电机调速系统,尤其是在恒转矩负载下,调压调速的调速范围,以及变频调速时的电压协调控制问题。 首先,对于带恒转矩负载的异步电动机而言...
《电机及拖动》是电气工程领域的一门基础课程,主要涵盖了电动机的工作原理、控制方式以及在实际应用中的拖动系统分析。许晓峰编著的这本书是高等教育出版社的一本经典教材,广泛应用于国内的高职院校教育。提供的自...
总结来说,这份《电力拖动自动控制系统-运动控制系统第5版-第二章~第七章-思考题与习题答案》资料,是学习和复习电力拖动自动化控制技术的重要参考资料,不仅涵盖了基本理论,还提供了实践应用的训练,对于电气工程...
拖拽就像呼吸一样容易。 7.1. 如此拖拽,简直就像与生俱来的本能一样。 7.2. 第一!乱拖。 7.3. 第二!代理proxy和目标target 7.4. 再拖!再拖拖。 8. 哭泣吧!现在才开始讲基础问题。 8.1. Ext.get 8.2. ...
总的来说,"电力拖动自动控制系统 第六章课件"将深入探讨电力拖动与自动化控制的结合,涵盖了电机工作原理、控制策略、系统建模、控制器设计、系统稳定性和安全保护等多个方面。这些知识点对于理解和应用电力拖动...
第四章的课程内容通常会深入探讨这一系统的具体组成、工作原理以及关键技术。以下是根据标题和描述可能涵盖的知识点的详细说明: 1. **系统构成**:电力拖动自动控制系统一般包括电源、电动机、控制器、传感器和...
QT 时间轴控件 可拖动!!!!!!!!!!!!!!!!
电机与拖动基础及MATLAB仿真课件 第3章 三相交流电动机的电力拖动
电机与拖动基础及MATLAB仿真课件 第7章 电动机容量的选择
### 在DELPHI7中不使用任何第三方控件实现放在工具栏上可拖动的方法 #### 背景介绍 Delphi 是一种基于Object Pascal语言的集成开发环境(IDE),广泛应用于Windows应用程序的开发。Delphi7作为Embarcadero ...
JavaScript CSS修改学习第六章主要讲解了如何实现拖拽功能,这是一种常见的交互设计,常用于网页中的元素操作。拖拽功能的实现涉及到JavaScript和CSS的结合使用。以下是对这个主题的详细解析: 首先,要实现拖拽...
第3章 异步电动机及拖动
电机与拖动 第二版 唐介主编 高等教育出版社 第1章磁路 第2章变压器 第3章异步电机的基本理论 第4章异步电机的电力拖动 第5章同步电机的基本理论 ...第7章直流电机的基本理论 第8章直流电机的电力拖动
这时,就需要借助第三方工具来实现这个功能。 "Win7 win10文件(文件夹)拖动排序补丁.zip"就是一个为了解决这个问题而设计的应用。这个压缩包文件包含了一个名为"win7tuodong"的补丁程序,它专为Windows 7和Windows ...
电机与拖动课件:第7章直流电机的基本理论1-4.ppt