<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-view-DropZone'>/**
|
</span> * @private
|
*/
|
Ext.define('Ext.view.DropZone', {
|
extend: 'Ext.dd.DropZone',
|
|
<span id='Ext-view-DropZone-property-indicatorHtml'> indicatorHtml: '<div class="' + Ext.baseCSSPrefix + 'grid-drop-indicator-left"></div><div class="' + Ext.baseCSSPrefix + 'grid-drop-indicator-right"></div>',
|
</span><span id='Ext-view-DropZone-property-indicatorCls'> indicatorCls: Ext.baseCSSPrefix + 'grid-drop-indicator',
|
</span>
|
<span id='Ext-view-DropZone-method-constructor'> constructor: function(config) {
|
</span> var me = this;
|
Ext.apply(me, config);
|
|
// Create a ddGroup unless one has been configured.
|
// User configuration of ddGroups allows users to specify which
|
// DD instances can interact with each other. Using one
|
// based on the id of the View would isolate it and mean it can only
|
// interact with a DragZone on the same View also using a generated ID.
|
if (!me.ddGroup) {
|
me.ddGroup = 'view-dd-zone-' + me.view.id;
|
}
|
|
// The DropZone's encapsulating element is the View's main element. It must be this because drop gestures
|
// may require scrolling on hover near a scrolling boundary. In Ext 4.x two DD instances may not use the
|
// same element, so a DragZone on this same View must use the View's parent element as its element.
|
me.callParent([me.view.el]);
|
},
|
|
<span id='Ext-view-DropZone-method-fireViewEvent'>// Fire an event through the client DataView. Lock this DropZone during the event processing so that
|
</span>// its data does not become corrupted by processing mouse events.
|
fireViewEvent: function() {
|
var me = this,
|
result;
|
|
me.lock();
|
result = me.view.fireEvent.apply(me.view, arguments);
|
me.unlock();
|
return result;
|
},
|
|
<span id='Ext-view-DropZone-method-getTargetFromEvent'> getTargetFromEvent : function(e) {
|
</span> var node = e.getTarget(this.view.getItemSelector()),
|
mouseY, nodeList, testNode, i, len, box;
|
|
// Not over a row node: The content may be narrower than the View's encapsulating element, so return the closest.
|
// If we fall through because the mouse is below the nodes (or there are no nodes), we'll get an onContainerOver call.
|
if (!node) {
|
mouseY = e.getPageY();
|
for (i = 0, nodeList = this.view.getNodes(), len = nodeList.length; i < len; i++) {
|
testNode = nodeList[i];
|
box = Ext.fly(testNode).getBox();
|
if (mouseY <= box.bottom) {
|
return testNode;
|
}
|
}
|
}
|
return node;
|
},
|
|
<span id='Ext-view-DropZone-method-getIndicator'> getIndicator: function() {
|
</span> var me = this;
|
|
if (!me.indicator) {
|
me.indicator = new Ext.Component({
|
html: me.indicatorHtml,
|
cls: me.indicatorCls,
|
ownerCt: me.view,
|
floating: true,
|
shadow: false
|
});
|
}
|
return me.indicator;
|
},
|
|
<span id='Ext-view-DropZone-method-getPosition'> getPosition: function(e, node) {
|
</span> var y = e.getXY()[1],
|
region = Ext.fly(node).getRegion(),
|
pos;
|
|
if ((region.bottom - y) >= (region.bottom - region.top) / 2) {
|
pos = "before";
|
} else {
|
pos = "after";
|
}
|
return pos;
|
},
|
|
<span id='Ext-view-DropZone-method-containsRecordAtOffset'> /**
|
</span> * @private Determines whether the record at the specified offset from the passed record
|
* is in the drag payload.
|
* @param records
|
* @param record
|
* @param offset
|
* @returns {Boolean} True if the targeted record is in the drag payload
|
*/
|
containsRecordAtOffset: function(records, record, offset) {
|
if (!record) {
|
return false;
|
}
|
var view = this.view,
|
recordIndex = view.indexOf(record),
|
nodeBefore = view.getNode(recordIndex + offset, true),
|
recordBefore = nodeBefore ? view.getRecord(nodeBefore) : null;
|
|
return recordBefore && Ext.Array.contains(records, recordBefore);
|
},
|
|
<span id='Ext-view-DropZone-method-positionIndicator'> positionIndicator: function(node, data, e) {
|
</span> var me = this,
|
view = me.view,
|
pos = me.getPosition(e, node),
|
overRecord = view.getRecord(node),
|
draggingRecords = data.records,
|
indicatorY;
|
|
if (!Ext.Array.contains(draggingRecords, overRecord) && (
|
pos == 'before' && !me.containsRecordAtOffset(draggingRecords, overRecord, -1) ||
|
pos == 'after' && !me.containsRecordAtOffset(draggingRecords, overRecord, 1)
|
)) {
|
me.valid = true;
|
|
if (me.overRecord != overRecord || me.currentPosition != pos) {
|
|
indicatorY = Ext.fly(node).getY() - view.el.getY() - 1;
|
if (pos == 'after') {
|
indicatorY += Ext.fly(node).getHeight();
|
}
|
me.getIndicator().setWidth(Ext.fly(view.el).getWidth()).showAt(0, indicatorY);
|
|
// Cache the overRecord and the 'before' or 'after' indicator.
|
me.overRecord = overRecord;
|
me.currentPosition = pos;
|
}
|
} else {
|
me.invalidateDrop();
|
}
|
},
|
|
<span id='Ext-view-DropZone-method-invalidateDrop'> invalidateDrop: function() {
|
</span> if (this.valid) {
|
this.valid = false;
|
this.getIndicator().hide();
|
}
|
},
|
|
<span id='Ext-view-DropZone-method-onNodeOver'> // The mouse is over a View node
|
</span> onNodeOver: function(node, dragZone, e, data) {
|
var me = this;
|
|
if (!Ext.Array.contains(data.records, me.view.getRecord(node))) {
|
me.positionIndicator(node, data, e);
|
}
|
return me.valid ? me.dropAllowed : me.dropNotAllowed;
|
},
|
|
<span id='Ext-view-DropZone-method-notifyOut'> // Moved out of the DropZone without dropping.
|
</span> // Remove drop position indicator
|
notifyOut: function(node, dragZone, e, data) {
|
var me = this;
|
|
me.callParent(arguments);
|
me.overRecord = me.currentPosition = null
|
me.valid = false;
|
if (me.indicator) {
|
me.indicator.hide();
|
}
|
},
|
|
<span id='Ext-view-DropZone-method-onContainerOver'> // The mouse is past the end of all nodes (or there are no nodes)
|
</span> onContainerOver : function(dd, e, data) {
|
var me = this,
|
view = me.view,
|
count = view.dataSource.getCount();
|
|
// There are records, so position after the last one
|
if (count) {
|
me.positionIndicator(view.all.last(), data, e);
|
}
|
|
// No records, position the indicator at the top
|
else {
|
me.overRecord = me.currentPosition = null;
|
me.getIndicator().setWidth(Ext.fly(view.el).getWidth()).showAt(0, 0);
|
me.valid = true;
|
}
|
return me.dropAllowed;
|
},
|
|
<span id='Ext-view-DropZone-method-onContainerDrop'> onContainerDrop : function(dd, e, data) {
|
</span> return this.onNodeDrop(dd, null, e, data);
|
},
|
|
<span id='Ext-view-DropZone-method-onNodeDrop'> onNodeDrop: function(targetNode, dragZone, e, data) {
|
</span> var me = this,
|
dropHandled = false,
|
|
// Create a closure to perform the operation which the event handler may use.
|
// Users may now set the wait parameter in the beforedrop handler, and perform any kind
|
// of asynchronous processing such as an Ext.Msg.confirm, or an Ajax request,
|
// and complete the drop gesture at some point in the future by calling either the
|
// processDrop or cancelDrop methods.
|
dropHandlers = {
|
wait: false,
|
processDrop: function () {
|
me.invalidateDrop();
|
me.handleNodeDrop(data, me.overRecord, me.currentPosition);
|
dropHandled = true;
|
me.fireViewEvent('drop', targetNode, data, me.overRecord, me.currentPosition);
|
},
|
|
cancelDrop: function() {
|
me.invalidateDrop();
|
dropHandled = true;
|
}
|
},
|
performOperation = false;
|
|
if (me.valid) {
|
performOperation = me.fireViewEvent('beforedrop', targetNode, data, me.overRecord, me.currentPosition, dropHandlers);
|
if (dropHandlers.wait) {
|
return;
|
}
|
|
if (performOperation !== false) {
|
// If either of the drop handlers were called in the event handler, do not do it again.
|
if (!dropHandled) {
|
dropHandlers.processDrop();
|
}
|
}
|
}
|
return performOperation;
|
},
|
|
<span id='Ext-view-DropZone-method-destroy'> destroy: function(){
|
</span> Ext.destroy(this.indicator);
|
delete this.indicator;
|
this.callParent();
|
}
|
});
|
</pre>
|
</body>
|
</html>
|