我使用extjs 4示例dragdropzones.js。它运行良好。但我想删除添加的项目意味着从panel.help中删除项目来解决这个问题。我尝试从函数onNodeDrop调用onclick上的另一个函数并尝试传递和访问目标，但它不起作用意味着它显示空值。所以我不明白这个程序是什么。
Ext.require(['*']);
Ext.onReady(function() {
Ext.define('Accountformfield', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [{
name: 'formfieldname'
}, {
name: 'id'
}]
});
var fields = [{
id: '1',
formfieldname: 'field1'
}, {
id: '2',
formfieldname: 'field2'
}, {
id: '3',
formfieldname: 'field3'
}, {
id: '4',
formfieldname: 'field4'
}, {
id: '5',
formfieldname: 'Field5'
}];
var fieldStore = Ext.create('Ext.data.Store', {
model: 'Accountformfield',
data: fields
});
var groups = [{
id: 1,
name: 'Group1'
}, {
id: 2,
name: 'Group2'
}, {
id: 3,
name: 'Group3'
}];
Ext.define('Formfieldgroup', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [{
name: 'name'
}]
});
var groupStore = Ext.create('Ext.data.Store', {
model: 'Formfieldgroup',
data: groups
});
var fieldView = Ext.create('Ext.view.View', {
cls: 'patient-view',
tpl: '<tpl for=".">' +
'<div class="patient-source"><table><tbody>' +
'<tr><td class="patient-label">Name</td><td class="patient-name">{formfieldname}</td></tr>' +
'</tbody></table></div>' +
'</tpl>',
itemSelector: 'div.patient-source',
overItemCls: 'patient-over',
selectedItemClass: 'patient-selected',
singleSelect: true,
store: fieldStore,
listeners: {
render: initializePatientDragZone,
el: {
click: function() {
Ext.Msg.alert('drag');
}
}
}
});
var mapingGrid = Ext.create('Ext.grid.GridPanel', {
title: 'Group Maintainance',
region: 'center',
margins: '0 5 5 0',
hideHeaders: true,
sortableColumns: false,
columns: [{
dataIndex: 'name',
width:'100%'
}],
features: [{
ftype:'rowbody',
rowBodyDivCls: 'hospital-target',
getAdditionalData: function() {
return Ext.apply(Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments), {
rowBody: 'Drop Field Here'
});
}
}
],
viewConfig: {
listeners: {
render: initializeHospitalDropZone
}
},
store: groupStore,
buttons: [{
text: 'Save',
handler: function(){
var form = formpanel.getForm();
form.loadRecord(record);
if(form.isValid()){
form.submit({
url: 'accounts',
//waitMsg: 'Uploading your photo...',
success: function(fp, o) {
msg('Success', 'Processed file "' + o.result.file + '" on the server');
}
});
}
}
}]
});
Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
cls: 'app-header',
region: 'north',
height: 30,
html: '<h1>Form Maintainance</h1>',
margins: '5 5 5 5'
}, {
title: 'Fields',
region: 'west',
width: 300,
margins: '0 5 5 5',
items: fieldView
}, mapingGrid
]
});
});
/*
* Here is where we "activate" the DataView.
* We have decided that each node with the class "patient-source" encapsulates a single draggable
* object.
*
* So we inject code into the DragZone which, when passed a mousedown event, interrogates
* the event to see if it was within an element with the class "patient-source". If so, we
* return non-null drag data.
*
* Returning non-null drag data indicates that the mousedown event has begun a dragging process.
* The data must contain a property called "ddel" which is a DOM element which provides an image
* of the data being dragged. The actual node clicked on is not dragged, a proxy element is dragged.
* We can insert any other data into the data object, and this will be used by a cooperating DropZone
* to perform the drop operation.
*/
function initializePatientDragZone(v) {
v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
// On receipt of a mousedown event, see if it is within a draggable element.
// Return a drag data object if so. The data object can contain arbitrary application
// data, but it should also contain a DOM element in the ddel property to provide
// a proxy to drag.
getDragData: function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10), d;
if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return v.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d,
patientData: v.getRecord(sourceEl).data
};
}
},
// Provide coordinates for the proxy to slide back to on failed drag.
// This is the original XY coordinates of the draggable element.
getRepairXY: function() {
return this.dragData.repairXY;
}
});
}
/*
* Here is where we "activate" the GridPanel.
* We have decided that the element with class "hospital-target" is the element which can receieve
* drop gestures. So we inject a method "getTargetFromEvent" into the DropZone. This is constantly called
* while the mouse is moving over the DropZone, and it returns the target DOM element if it detects that
* the mouse if over an element which can receieve drop gestures.
*
* Once the DropZone has been informed by getTargetFromEvent that it is over a target, it will then
* call several "onNodeXXXX" methods at various points. These include:
*
* onNodeEnter
* onNodeOut
* onNodeOver
* onNodeDrop
*
* We provide implementations of each of these to provide behaviour for these events.
*/
function initializeHospitalDropZone(v) {
var gridView = v,
grid = gridView.up('gridpanel');
grid.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
// If the mouse is over a target node, return that node. This is
// provided as the "target" parameter in all "onNodeXXXX" node event handling functions
getTargetFromEvent: function(e) {
return e.getTarget('.hospital-target');
},
// On entry into a target node, highlight that node.
onNodeEnter : function(target, dd, e, data){
Ext.fly(target).addCls('hospital-target-hover');
},
// On exit from a target node, unhighlight that node.
onNodeOut : function(target, dd, e, data){
Ext.fly(target).removeCls('hospital-target-hover');
},
// While over a target node, return the default drop allowed class which
// places a "tick" icon into the drag proxy.
onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},
// On node drop, we can interrogate the target node to find the underlying
// application object that is the real target of the dragged data.
// In this case, it is a Record in the GridPanel's Store.
// We can use the data set up by the DragZone's getDragData method to read
// any data we decided to attach.
onNodeDrop : function(target, dd, e, data){
var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),
mainRow = rowBody.previousSibling,
h = gridView.getRecord(mainRow),
targetEl = Ext.get(target);
targetEl.update('<a onclick="remove(\''+data.patientData.id+'\');">'+data.patientData.formfieldname + '</a>,' + targetEl.dom.innerHTML);
//Ext.Msg.alert(targetEl.dom.innerHTML);
//Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.patientData.formfieldname +' on hospital ' + h.data.name);
return true;
}
});
}
答案 0 :(得分：1)
首先，在患者视图和每个模板行中添加ID：
fieldView = Ext.create('Ext.view.View', {
// add id
id: "patientView",
cls: 'patient-view',
// for each item add appropriate id
tpl: '<tpl for=".">' +
'<div id="{id}" class="patient-source"><table><tbody>' +
'<tr><td class="patient-label">Name</td><td class="patient-name">{formfieldname}</td></tr>' +
'</tbody></table></div>' +
'</tpl>',
itemSelector: 'div.patient-source',
overItemCls: 'patient-over',
selectedItemClass: 'patient-selected',
singleSelect: true,
store: fieldStore,
listeners: {
render: initializePatientDragZone,
el: {
click: function() {
Ext.Msg.alert('drag');
}
}
}
});
接下来，在onNodeDrop处理程序中添加下一个从DOM中删除html行的代码
onNodeDrop : function(target, dd, e, data){
var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),
mainRow = rowBody.previousSibling,
h = gridView.getRecord(mainRow),
targetEl = Ext.get(target);
targetEl.update('<a onclick="remove(\''+data.patientData.id+'\');">'+data.patientData.formfieldname + '</a>,' + targetEl.dom.innerHTML);
// This code removes HTML row from the control.
var htmlNode = Ext.getCmp("patientView").el.down("#"+data.patientData.id);
htmlNode.remove();
return true;
}