你可以拖拽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. 后记
电力拖动自动控制系统 第二章课件 电力拖动自动控制系统 第二章课件
电机及拖动基础 第四版 顾绳谷主编 第8章只有前半部分 无答案
目录.bat 电机与拖动基础及MATLAB仿真课件 第0章 绪论.ppt ...电机与拖动基础及MATLAB仿真课件 第7章 电动机容量的选择.ppt fzsl01.m fzsl02.m fzsl03.m fzsl04.m fzsl05.m fzsl06.m 书中仿真实例Matlab程序代码.doc
电力拖动自动控制系统 第五章课件 电力拖动自动控制系统 第五章课件
电力拖动自动控制系统交流部分,第六章基于稳态模型的交流电机调速系统的重点难点总结和习题,非常不错适合于复习用。
系统的调速范围是1000~100 ,要求静差率s=2%,那么系统允许的静差转速降是多少? 解: 系统允许的静态速降为 。 2.3 某一调速系统,在额定负载下,最高转速特性为 ,最低转速特性为 ,带额定负载时的速度降落 ,且...
电力拖动自动控制系统 第四章课件 电力拖动自动控制系统 第四章课件
拖拽就像呼吸一样容易。 7.1. 如此拖拽,简直就像与生俱来的本能一样。 7.2. 第一!乱拖。 7.3. 第二!代理proxy和目标target 7.4. 再拖!再拖拖。 8. 哭泣吧!现在才开始讲基础问题。 8.1. Ext.get 8.2. ...
电机拖动1-7章 课后题答案 刘锦波 张承惠 主编
电力拖动自动控制系统 第六章课件 电力拖动自动控制系统 第六章课件
电力拖动自动控制系统-运动控制系统第5版-第二章~第七章-思考题与习题答案
电机与拖动基础及MATLAB仿真课件 第3章 三相交流电动机的电力拖动
电力拖动自动控制系统——运动控制系统:第9章 电力拖动自动控制系统.ppt
QT 时间轴控件 可拖动!!!!!!!!!!!!!!!!
第三章 三相异步电动机的电力拖动 (2).pdf第三章 三相异步电动机的电力拖动 (2).pdf第三章 三相异步电动机的电力拖动 (2).pdf第三章 三相异步电动机的电力拖动 (2).pdf第三章 三相异步电动机的电力拖动 (2).pdf第三...
电力拖动自动控制系统第二章PPT课件.pptx
电机与拖动基础及MATLAB仿真课件 第7章 电动机容量的选择
高等教育出版社出版的许晓峰《电机及拖动》本章自测题及答案,非常难得呀。许多的高职学校都用。
大学电子系电机与拖动 第一章课件。第一章 磁路