LearningExtJS_new DD 의 응용 학습 (9)
<!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);
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
activemq 5.5 의 입문 은 설치, 시작, 데이터베이스 지속 화 를 포함한다Apache ActiveMQ 5.5.0 은 주로 유지보수 버 전 으로 130 개가 넘 는 문 제 를 복 구 했 으 며 대부분 bug 와 개선 이 었 다. Improved performance for offline d...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
