/**
* This plugin provides drag and drop functionality for a {@link Ext.tree.View TreeView}.
*
* A specialized instance of {@link Ext.dd.DragZone DragZone} and {@link Ext.dd.DropZone
* DropZone} are attached to the tree view. The DropZone will participate in drops
* from DragZones having the same {@link #ddGroup} including drops from within the same
* tree.
*
* During the drop operation a data object is passed to a participating DropZone's drop
* handlers. The drag data object has the following properties:
*
* - **copy:** {@link Boolean} <br> The value of {@link #copy}. Or `true` if {@link #allowCopy}
* is true **and** the control key was pressed as the drag operation began.
*
* - **view:** {@link Ext.tree.View TreeView} <br> The source tree view from which the
* drag originated
*
* - **ddel:** HTMLElement <br> The drag proxy element which moves with the cursor
*
* - **item:** HTMLElement <br> The tree view node upon which the mousedown event was
* registered
*
* - **records:** {@link Array} <br> An Array of {@link Ext.data.Model Model}s
* representing the selected data being dragged from the source tree view.
*
* By adding this plugin to a view, two new events will be fired from the client
* tree view as well as its owning Tree: `{@link #beforedrop}` and `{@link #drop}`.
*
* var store = Ext.create('Ext.data.TreeStore', {
* root: {
* expanded: true,
* children: [{
* text: "detention",
* leaf: true
* }, {
* text: "homework",
* expanded: true,
* children: [{
* text: "book report",
* leaf: true
* }, {
* text: "algebra",
* leaf: true
* }]
* }, {
* text: "buy lottery tickets",
* leaf: true
* }]
* }
* });
*
* Ext.create('Ext.tree.Panel', {
* title: 'Simple Tree',
* width: 200,
* height: 200,
* store: store,
* rootVisible: false,
* renderTo: document.body,
* viewConfig: {
* plugins: {
* treeviewdragdrop: {
* dragText: 'Drag and drop to reorganize'
* }
* }
* }
* });
*/
Ext.define('Ext.tree.plugin.TreeViewDragDrop', {
extend: 'Ext.plugin.Abstract',
alias: 'plugin.treeviewdragdrop',
uses: [
'Ext.tree.ViewDragZone',
'Ext.tree.ViewDropZone'
],
/**
* @event beforedrop
* **This event is fired through the {@link Ext.tree.View TreeView} and its owning
* {@link Ext.tree.Panel Tree}. You can add listeners to the tree or tree {@link
* Ext.tree.Panel#viewConfig view config} object**
*
* Fired when a drop gesture has been triggered by a mouseup event in a valid drop
* position in the tree view.
*
* Returning `false` to this event signals that the drop gesture was invalid and
* animates the drag proxy back to the point from which the drag began.
*
* The dropHandlers parameter can be used to defer the processing of this event. For
* example, you can force the handler to wait for the result of a message box
* confirmation or an asynchronous server call (_see the details of the dropHandlers
* property for more information_).
*
* tree.on('beforedrop', function(node, data, overModel, dropPosition, dropHandlers) {
* // Defer the handling
* dropHandlers.wait = true;
* Ext.MessageBox.confirm('Drop', 'Are you sure', function(btn){
* if (btn === 'yes') {
* dropHandlers.processDrop();
* } else {
* dropHandlers.cancelDrop();
* }
* });
* });
*
* Any other return value continues with the data transfer operation unless the wait
* property is set.
*
* @param {HTMLElement} node The {@link Ext.tree.View tree view} node **if any** over
* which the cursor was positioned.
*
* @param {Object} data The data object gathered at mousedown time by the
* cooperating {@link Ext.dd.DragZone DragZone}'s {@link Ext.dd.DragZone#getDragData
* getDragData} method. It contains the following properties:
* @param {Boolean} data.copy The value of {@link #copy}. Or `true` if
* {@link #allowCopy} is true **and** the control key was pressed as the drag
* operation began.
* @param {Ext.tree.View} data.view The source tree view from which the drag
* originated
* @param {HTMLElement} data.ddel The drag proxy element which moves with the cursor
* @param {HTMLElement} data.item The tree view node upon which the mousedown event
* was registered
* @param {Ext.data.TreeModel[]} data.records An Array of Models representing the
* selected data being dragged from the source tree view
*
* @param {Ext.data.TreeModel} overModel The Model over which the drop gesture took place
*
* @param {String} dropPosition `"before"` or `"after"` depending on whether the
* cursor is above or below the mid-line of the node.
*
* @param {Object} dropHandlers
* This parameter allows the developer to control when the drop action takes place.
* It is useful if any asynchronous processing needs to be completed before
* performing the drop. This object has the following properties:
*
* @param {Boolean} dropHandlers.wait Indicates whether the drop should be deferred.
* Set this property to true to defer the drop.
* @param {Function} dropHandlers.processDrop A function to be called to complete
* the drop operation.
* @param {Function} dropHandlers.cancelDrop A function to be called to cancel the
* drop operation.
*/
/**
* @event drop
* **This event is fired through the {@link Ext.tree.View TreeView} and its owning
* {@link Ext.tree.Panel Tree}. You can add listeners to the tree or tree {@link
* Ext.tree.Panel#viewConfig view config} object**
*
* Fired when a drop operation has been completed and the data has been moved or
* copied.
*
* @param {HTMLElement} node The {@link Ext.tree.View tree view} node **if any** over
* which the cursor was positioned.
*
* @param {Object} data The data object gathered at mousedown time by the
* cooperating {@link Ext.dd.DragZone DragZone}'s {@link Ext.dd.DragZone#getDragData
* getDragData} method. It contains the following properties:
* @param {Boolean} data.copy The value of {@link #copy}. Or `true` if
* {@link #allowCopy} is true **and** the control key was pressed as the drag
* operation began.
* @param {Ext.tree.View} data.view The source tree view from which the drag
* originated
* @param {HTMLElement} data.ddel The drag proxy element which moves with the cursor
* @param {HTMLElement} data.item The tree view node upon which the mousedown event
* was registered
* @param {Ext.data.TreeModel[]} data.records An Array of Models representing the
* selected data being dragged from the source tree view
*
* @param {Ext.data.TreeModel} overModel The Model over which the drop gesture took
* place.
*
* @param {String} dropPosition `"before"` or `"after"` depending on whether the
* cursor is above or below the mid-line of the node.
*/
/**
* @cfg {Boolean} [copy=false]
* Set as `true` to copy the records from the source grid to the destination drop
* grid. Otherwise, dragged records will be moved.
*
* **Note:** This only applies to records dragged between two different grids with
* unique stores.
*
* See {@link #allowCopy} to allow only control-drag operations to copy records.
*/
/**
* @cfg {Boolean} [allowCopy=false]
* Set as `true` to allow the user to hold down the control key at the start of the
* drag operation and copy the dragged records between grids. Otherwise, dragged
* records will be moved.
*
* **Note:** This only applies to records dragged between two different grids with
* unique stores.
*
* See {@link #copy} to enable the copying of all dragged records.
*/
/**
* @cfg {String} dragText
* The text to show while dragging.
*
* Two placeholders can be used in the text:
*
* - `{0}` The number of selected items.
* - `{1}` 's' when more than 1 items (only useful for English).
*
* **NOTE:** The node's {@link Ext.tree.Panel#cfg-displayField text} will be shown
* when a single node is dragged unless `dragText` is a simple text string.
* @locale
*/
dragText: '{0} selected node{1}',
/**
* @cfg {Boolean} allowParentInserts
* Allow inserting a dragged node between an expanded parent node and its first child
* that will become a sibling of the parent when dropped.
*/
allowParentInserts: false,
/**
* @cfg {Boolean} allowContainerDrops
* True if drops on the tree container (outside of a specific tree node) are allowed.
*/
allowContainerDrops: false,
/**
* @cfg {Boolean} appendOnly
* True if the tree should only allow append drops (use for trees which are sorted).
*/
appendOnly: false,
/**
* @cfg {String} [ddGroup=TreeDD]
* A named drag drop group to which this object belongs. If a group is specified, then both
* the DragZones and DropZone used by this plugin will only interact with other drag drop
* objects in the same group.
*/
ddGroup: "TreeDD",
/**
* True to register this container with the Scrollmanager for auto scrolling during
* drag operations. A {@link Ext.dd.ScrollManager} configuration may also be passed.
* @cfg {Object/Boolean} containerScroll
*/
containerScroll: false,
/**
* @cfg {String} [dragGroup]
* The ddGroup to which the {@link #property-dragZone DragZone} will belong.
*
* This defines which other DropZones the DragZone will interact with. Drag/DropZones
* only interact with other Drag/DropZones which are members of the same ddGroup.
*/
/**
* @cfg {String} [dropGroup]
* The ddGroup to which the {@link #property-dropZone DropZone} will belong.
*
* This defines which other DragZones the DropZone will interact with. Drag/DropZones
* only interact with other Drag/DropZones which are members of the same {@link #ddGroup}.
*/
/**
* @cfg {Boolean} [sortOnDrop=false]
* Configure as `true` to sort the target node into the current tree sort order after
* the dropped node is added.
*/
/**
* @cfg {Number} [expandDelay=1000]
* The delay in milliseconds to wait before expanding a target tree node while dragging
* a droppable node over the target.
*/
expandDelay: 1000,
/**
* @cfg {Boolean} enableDrop
* Set to `false` to disallow the View from accepting drop gestures.
*/
enableDrop: true,
/**
* @cfg {Boolean} enableDrag
* Set to `false` to disallow dragging items from the View.
*/
enableDrag: true,
/**
* @cfg {String} [nodeHighlightColor=c3daf9]
* The color to use when visually highlighting the dragged or dropped node (default value
* is light blue). The color must be a 6 digit hex value, without a preceding '#'.
* See also {@link #nodeHighlightOnDrop} and
* {@link #nodeHighlightOnRepair}.
*/
nodeHighlightColor: 'c3daf9',
/**
* @cfg {Boolean} nodeHighlightOnDrop
* Whether or not to highlight any nodes after they are
* successfully dropped on their target. Defaults to the value of `Ext.enableFx`.
* See also {@link #nodeHighlightColor} and {@link #nodeHighlightOnRepair}.
*/
nodeHighlightOnDrop: Ext.enableFx,
/**
* @cfg {Boolean} nodeHighlightOnRepair
* Whether or not to highlight any nodes after they are
* repaired from an unsuccessful drag/drop. Defaults to the value of `Ext.enableFx`.
* See also {@link #nodeHighlightColor} and {@link #nodeHighlightOnDrop}.
*/
/**
* @cfg {String} [displayField=text]
* The name of the model field that is used to display the text for the nodes
*/
displayField: 'text',
/**
* @cfg {Object} [dragZone]
* A config object to apply to the creation of the {@link #property-dragZone DragZone}
* which handles for drag start gestures.
*
* Template methods of the DragZone may be overridden using this config.
*/
/**
* @cfg {Object} [dropZone]
* A config object to apply to the creation of the {@link #property-dropZone DropZone}
* which handles mouseover and drop gestures.
*
* Template methods of the DropZone may be overridden using this config.
*/
/**
* @property {Ext.view.DragZone} dragZone
* An {@link Ext.view.DragZone DragZone} which handles mousedown and dragging of records
* from the grid.
*/
/**
* @property {Ext.grid.ViewDropZone} dropZone
* An {@link Ext.grid.ViewDropZone DropZone} which handles mouseover and dropping records
* in any grid which shares the same {@link #dropGroup}.
*/
init: function(view) {
Ext.applyIf(view, {
copy: this.copy,
allowCopy: this.allowCopy
});
view.on('render', this.onViewRender, this, {
single: true
});
},
destroy: function() {
var me = this;
me.dragZone = me.dropZone = Ext.destroy(me.dragZone, me.dropZone);
me.callParent();
},
onViewRender: function(view) {
var me = this,
ownerGrid = view.ownerCt.ownerGrid || view.ownerCt,
scrollEl;
ownerGrid.relayEvents(view, ['beforedrop', 'drop']);
if (me.enableDrag) {
if (me.containerScroll) {
scrollEl = view.getEl();
}
me.dragZone = new Ext.tree.ViewDragZone(Ext.apply({
view: view,
ddGroup: me.dragGroup || me.ddGroup,
dragText: me.dragText,
displayField: me.displayField,
repairHighlightColor: me.nodeHighlightColor,
repairHighlight: me.nodeHighlightOnRepair,
scrollEl: scrollEl
}, me.dragZone));
}
if (me.enableDrop) {
me.dropZone = new Ext.tree.ViewDropZone(Ext.apply({
view: view,
ddGroup: me.dropGroup || me.ddGroup,
allowContainerDrops: me.allowContainerDrops,
appendOnly: me.appendOnly,
allowParentInserts: me.allowParentInserts,
expandDelay: me.expandDelay,
dropHighlightColor: me.nodeHighlightColor,
dropHighlight: me.nodeHighlightOnDrop,
sortOnDrop: me.sortOnDrop,
containerScroll: me.containerScroll
}, me.dropZone));
}
}
}, function() {
var proto = this.prototype;
proto.nodeHighlightOnDrop = proto.nodeHighlightOnRepair = Ext.enableFx;
});