LearningExtJS_new 之 DD 的应用学习(九)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Drag and drop</title>
<link rel="stylesheet" type="text/css" href="../pubjs/ext/resources/css/ext-all.css">
<script type="text/javascript" src="../pubjs/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../pubjs/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="./dragAndDropTest.js"></script>
</head>
<body>
<div id="bigDrag" style="background:#aabbaa;width:100px;height:200px;overflow-y: hidden;float:left;">
<div id="dragMe" style="background:#00ff00;width:100px;height:100px;overflow-y: hidden;">This is the source here!!!</div>
</div>
<div id="dropMe" style="background:#00ff00;width:100px;height:200px;overflow-y: hidden;float:left;">This is the target here!!!</div>
<h1>今天</h1>
<ul id="today">
<li>逛商场</li>
<li>理发</li>
</ul>
<h1>明天</h1>
<ul id="tmrw">
<li>看医生</li>
</ul>
<div id="people" style="background:#aaffcc;width:200px;height:300px;overflow-y: hidden;float:left;"></div>
<div id="detail" style="background:#ccffaa; overflow-y: hidden;float:left;"></div>
</body>
</html>
/**
* 一.最简单的调用拖放
* 1.DragSource 用来定义可以拖动的对象
* 2.DropTarget 用来定义可以放置的地方
* 1>使用notifyDrop.时返回true表示可以放置
* 3.修改notifyDrop在操作时增加元素操作
* 4.使用 dragZone进行一组元素中的单一元素操作
* 1>可以使用Ext.dd.Registry.register对各元素进行注册
* 5.使用dropZone对一组元素参允许放置地
* 1>对onNodeDrop方法进行重写以对元素进行操作
* 6.学习使用dataView.
* 1>使用getDragData方法返回移动的无素信息
* 2>动态对元素进行加载
*/
var ddMain = function(){
var _firstDragTest = function(){
new Ext.dd.DragSource("dragMe");
new Ext.dd.DropTarget("dropMe", {
notifyDrop : function() {
return true
}
});
var el = Ext.get("dropMe")
var cfg = {};
el.ddScrollConfig = cfg;
Ext.dd.ScrollManager.register(el);
};
//增加方法使每个节点捕捉方法
var _drop = function(dropNodeData,source,event,dragNodeData){
//原元素容器
var oldContainer = source.el.dom;
//现无素容器
var newContainer = this.getEl();
//原来元素
var nowEl = source.dragData.ddel;
//增加元素
oldContainer.removeChild(nowEl);
newContainer.appendChild(nowEl);
console.debug(dropNodeData,source,event,dragNodeData);
return true;
}
//根两个列表,可以把A列表中内容拖到B列表的内容中去.
var _useDDTest = function(){
//定义源
new Ext.dd.DragZone("today");
new Ext.dd.DragZone("tmrw");
//注册所有li元素可拖拉
var liTags = document.getElementsByTagName("li");
for(var i = 0;i < liTags.length;i++){
Ext.dd.Registry.register(liTags[i],{name:"ss"});
}
//定义目标
var cfg = {onNodeDrop:_drop};
new Ext.dd.DropZone("today",cfg);
new Ext.dd.DropZone("tmrw",cfg);
};
var orgJsonData = [[
1,
"java",
"sun",
"bj",
"image/de.png"
],[
2,
"oracle",
"oracle",
"fz",
"image/fr.png"
],[
3,
"vb.net",
"microsoft",
"ly",
"image/us.png"
]
];
//define a store
var personStore = new Ext.data.SimpleStore({
data:orgJsonData,
fields:["id","name","country","city","image"]
});
//use dataView 定义两个列表,A列表从数据库中加载,当A拖放到B时,自动信息加载到B上.
var _dataViewTest = function(){
//定义dataView用来保存记录信息
var people = new Ext.DataView({
tpl:new Ext.XTemplate(
'<tpl for=".">',
'<div class="person">',
'<h1>',
'{name}', //values 即store的record
'</h1>',
'<div>',
'<img width="64" height="64" src="{image}" />',
'</div>',
'</div>',
'</tpl>'
),
itemSelector: 'div.person',
store:personStore
});
//附加到people层上
people.render("people");
//定义返回值信息getDragData返回值信息
new Ext.dd.DragZone(people.getEl(), {
getDragData : function(e){
var container = e.getTarget("div.person",5,true);
if(container){
return {
ddel:container.down("h1").dom,
record:people.getRecord(container.dom)
};
}
return false;
}
});
//定义form信息
var winForm = new Ext.form.FormPanel({
renderTo : "detail",
width : 250,
height : 200,
defaultType : "textfield",
items : [{
fieldLabel : "姓名",
name : "name"
}, {
fieldLabel : "国家",
name : "country"
}, {
fieldLabel : "城市",
name : "city"
}],
title:"个人信息中心"
});
//加载from的notifyDrop信息
new Ext.dd.DropTarget(winForm.getEl(), {
notifyDrop : function(source,e,data) {
//取数据
var record = source.dragData.record;
winForm.getForm().loadRecord(record);
//删除原始对象
//_deleteSourceEl(source,e,data);
return true;
}
});
},
_deleteSourceEl = function(source,e,data){
//查找原容器
var oldConatiner = source.el.dom;
//查找移动对象
var oldObj = source.dragData.ddel;
var oObj = Ext.fly(oldObj).up("div");
//删除
//Ext.destroy(oObj);
oObj.remove();
}
return {
init : function(){
//Ext.dd.DragDropMgr.mode = Ext.dd.DragDropMgr.INTERSECT;
_firstDragTest();
// _useDDTest();
_dataViewTest();
//Ext.dd.ScrollManager.register("dragMe");
}
}
}();
Ext.onReady(ddMain.init,ddMain,true);