LearningExtJS_new 之 DD 的应用学习(九) -

refurbish

浏览: 27829 次
性别:
来自: 福州

最近访客更多访客>>

tianyoufeizhu

fhj18302

火狐1234

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (27)

社区版块

存档分类

LearningExtJS_new 之 DD 的应用学习(九)

EXT WinForm Oracle VB VB.NET

<!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);

分享到：