<!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-ux-DataView-Draggable'>/**
|
</span> * @author Ed Spencer
|
*
|
<pre><code>
|
Ext.create('Ext.view.View', {
|
mixins: {
|
draggable: 'Ext.ux.DataView.Draggable'
|
},
|
|
initComponent: function() {
|
this.mixins.draggable.init(this, {
|
ddConfig: {
|
ddGroup: 'someGroup'
|
}
|
});
|
|
this.callParent(arguments);
|
}
|
});
|
</code></pre>
|
*
|
*/
|
Ext.define('Ext.ux.DataView.Draggable', {
|
requires: 'Ext.dd.DragZone',
|
|
<span id='Ext-ux-DataView-Draggable-cfg-ghostCls'> /**
|
</span> * @cfg {String} ghostCls The CSS class added to the outermost element of the created ghost proxy
|
* (defaults to 'x-dataview-draggable-ghost')
|
*/
|
ghostCls: 'x-dataview-draggable-ghost',
|
|
<span id='Ext-ux-DataView-Draggable-cfg-ghostTpl'> /**
|
</span> * @cfg {Ext.XTemplate/Array} ghostTpl The template used in the ghost DataView
|
*/
|
ghostTpl: [
|
'<tpl for=".">',
|
'{title}',
|
'</tpl>'
|
],
|
|
<span id='Ext-ux-DataView-Draggable-cfg-ddConfig'> /**
|
</span> * @cfg {Object} ddConfig Config object that is applied to the internally created DragZone
|
*/
|
|
<span id='Ext-ux-DataView-Draggable-cfg-ghostConfig'> /**
|
</span> * @cfg {String} ghostConfig Config object that is used to configure the internally created DataView
|
*/
|
|
init: function(dataview, config) {
|
<span id='Ext-ux-DataView-Draggable-property-dataview'> /**
|
</span> * @property dataview
|
* @type Ext.view.View
|
* The Ext.view.View instance that this DragZone is attached to
|
*/
|
this.dataview = dataview;
|
|
dataview.on('render', this.onRender, this);
|
|
Ext.apply(this, {
|
itemSelector: dataview.itemSelector,
|
ghostConfig : {}
|
}, config || {});
|
|
Ext.applyIf(this.ghostConfig, {
|
itemSelector: 'img',
|
cls: this.ghostCls,
|
tpl: this.ghostTpl
|
});
|
},
|
|
<span id='Ext-ux-DataView-Draggable-method-onRender'> /**
|
</span> * @private
|
* Called when the attached DataView is rendered. Sets up the internal DragZone
|
*/
|
onRender: function() {
|
var config = Ext.apply({}, this.ddConfig || {}, {
|
dvDraggable: this,
|
dataview : this.dataview,
|
getDragData: this.getDragData,
|
getTreeNode: this.getTreeNode,
|
afterRepair: this.afterRepair,
|
getRepairXY: this.getRepairXY
|
});
|
|
<span id='Ext-ux-DataView-Draggable-property-dragZone'> /**
|
</span> * @property dragZone
|
* @type Ext.dd.DragZone
|
* The attached DragZone instane
|
*/
|
this.dragZone = Ext.create('Ext.dd.DragZone', this.dataview.getEl(), config);
|
},
|
|
<span id='Ext-ux-DataView-Draggable-method-getDragData'> getDragData: function(e) {
|
</span> var draggable = this.dvDraggable,
|
dataview = this.dataview,
|
selModel = dataview.getSelectionModel(),
|
target = e.getTarget(draggable.itemSelector),
|
selected, dragData;
|
|
if (target) {
|
if (!dataview.isSelected(target)) {
|
selModel.select(dataview.getRecord(target));
|
}
|
|
selected = dataview.getSelectedNodes();
|
dragData = {
|
copy: true,
|
nodes: selected,
|
records: selModel.getSelection(),
|
item: true
|
};
|
|
if (selected.length == 1) {
|
dragData.single = true;
|
dragData.ddel = target;
|
} else {
|
dragData.multi = true;
|
dragData.ddel = draggable.prepareGhost(selModel.getSelection()).dom;
|
}
|
|
return dragData;
|
}
|
|
return false;
|
},
|
|
<span id='Ext-ux-DataView-Draggable-method-getTreeNode'> getTreeNode: function() {
|
</span> // console.log('test');
|
},
|
|
<span id='Ext-ux-DataView-Draggable-method-afterRepair'> afterRepair: function() {
|
</span> this.dragging = false;
|
|
var nodes = this.dragData.nodes,
|
length = nodes.length,
|
i;
|
|
//FIXME: Ext.fly does not work here for some reason, only frames the last node
|
for (i = 0; i < length; i++) {
|
Ext.get(nodes[i]).frame('#8db2e3', 1);
|
}
|
},
|
|
<span id='Ext-ux-DataView-Draggable-method-getRepairXY'> /**
|
</span> * @private
|
* Returns the x and y co-ordinates that the dragged item should be animated back to if it was dropped on an
|
* invalid drop target. If we're dragging more than one item we don't animate back and just allow afterRepair
|
* to frame each dropped item.
|
*/
|
getRepairXY: function(e) {
|
if (this.dragData.multi) {
|
return false;
|
} else {
|
var repairEl = Ext.get(this.dragData.ddel),
|
repairXY = repairEl.getXY();
|
|
//take the item's margins and padding into account to make the repair animation line up perfectly
|
repairXY[0] += repairEl.getPadding('t') + repairEl.getMargin('t');
|
repairXY[1] += repairEl.getPadding('l') + repairEl.getMargin('l');
|
|
return repairXY;
|
}
|
},
|
|
<span id='Ext-ux-DataView-Draggable-method-prepareGhost'> /**
|
</span> * Updates the internal ghost DataView by ensuring it is rendered and contains the correct records
|
* @param {Array} records The set of records that is currently selected in the parent DataView
|
* @return {Ext.view.View} The Ghost DataView
|
*/
|
prepareGhost: function(records) {
|
var ghost = this.createGhost(records),
|
store = ghost.store;
|
|
store.removeAll();
|
store.add(records);
|
|
return ghost.getEl();
|
},
|
|
<span id='Ext-ux-DataView-Draggable-method-createGhost'> /**
|
</span> * @private
|
* Creates the 'ghost' DataView that follows the mouse cursor during the drag operation. This div is usually a
|
* lighter-weight representation of just the nodes that are selected in the parent DataView.
|
*/
|
createGhost: function(records) {
|
if (!this.ghost) {
|
var ghostConfig = Ext.apply({}, this.ghostConfig, {
|
store: Ext.create('Ext.data.Store', {
|
model: records[0].modelName
|
})
|
});
|
|
this.ghost = Ext.create('Ext.view.View', ghostConfig);
|
|
this.ghost.render(document.createElement('div'));
|
}
|
|
return this.ghost;
|
}
|
});
|
</pre>
|
</body>
|
</html>
|
