docs/source/TreeViewDragDrop.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-tree-plugin-TreeViewDragDrop'>/**
  19 </span> * This plugin provides drag and/or drop functionality for a TreeView.
  20  *
  21  * It creates a specialized instance of {@link Ext.dd.DragZone DragZone} which knows how to drag out of a
  22  * {@link Ext.tree.View TreeView} and loads the data object which is passed to a cooperating
  23  * {@link Ext.dd.DragZone DragZone}'s methods with the following properties:
  24  *
  25  *   - copy : Boolean
  26  *
  27  *     The value of the TreeView's `copy` property, or `true` if the TreeView was configured with `allowCopy: true` *and*
  28  *     the control key was pressed when the drag operation was begun.
  29  *
  30  *   - view : TreeView
  31  *
  32  *     The source TreeView from which the drag originated.
  33  *
  34  *   - ddel : HtmlElement
  35  *
  36  *     The drag proxy element which moves with the mouse
  37  *
  38  *   - item : HtmlElement
  39  *
  40  *     The TreeView node upon which the mousedown event was registered.
  41  *
  42  *   - records : Array
  43  *
  44  *     An Array of {@link Ext.data.Model Models} representing the selected data being dragged from the source TreeView.
  45  *
  46  * It also creates a specialized instance of {@link Ext.dd.DropZone} which cooperates with other DropZones which are
  47  * members of the same ddGroup which processes such data objects.
  48  *
  49  * Adding this plugin to a view means that two new events may be fired from the client TreeView, {@link #beforedrop} and
  50  * {@link #drop}.
  51  *
  52  * Note that the plugin must be added to the tree view, not to the tree panel. For example using viewConfig:
  53  *
  54  *     viewConfig: {
  55  *         plugins: { ptype: 'treeviewdragdrop' }
  56  *     }
  57  */
  58 Ext.define('Ext.tree.plugin.TreeViewDragDrop', {
  59     extend: 'Ext.AbstractPlugin',
  60     alias: 'plugin.treeviewdragdrop',
  61
  62     uses: [
  63         'Ext.tree.ViewDragZone',
  64         'Ext.tree.ViewDropZone'
  65     ],
  66
  67 <span id='Ext-tree-plugin-TreeViewDragDrop-event-beforedrop'>    /**
  68 </span>     * @event beforedrop
  69      *
  70      * **This event is fired through the TreeView. Add listeners to the TreeView object**
  71      *
  72      * Fired when a drop gesture has been triggered by a mouseup event in a valid drop position in the TreeView.
  73      *
  74      * @param {HTMLElement} node The TreeView node **if any** over which the mouse was positioned.
  75      *
  76      * Returning `false` to this event signals that the drop gesture was invalid, and if the drag proxy will animate
  77      * back to the point from which the drag began.
  78      *
  79      * Returning `0` To this event signals that the data transfer operation should not take place, but that the gesture
  80      * was valid, and that the repair operation should not take place.
  81      *
  82      * Any other return value continues with the data transfer operation.
  83      *
  84      * @param {Object} data The data object gathered at mousedown time by the cooperating
  85      * {@link Ext.dd.DragZone DragZone}'s {@link Ext.dd.DragZone#getDragData getDragData} method it contains the following
  86      * properties:
  87      * @param {Boolean} data.copy The value of the TreeView's `copy` property, or `true` if the TreeView was configured with
  88      * `allowCopy: true` and the control key was pressed when the drag operation was begun
  89      * @param {Ext.tree.View} data.view The source TreeView from which the drag originated.
  90      * @param {HTMLElement} data.ddel The drag proxy element which moves with the mouse
  91      * @param {HTMLElement} data.item The TreeView node upon which the mousedown event was registered.
  92      * @param {Ext.data.Model[]} data.records An Array of {@link Ext.data.Model Model}s representing the selected data being
  93      * dragged from the source TreeView.
  94      *
  95      * @param {Ext.data.Model} overModel The Model over which the drop gesture took place.
  96      *
  97      * @param {String} dropPosition `&quot;before&quot;`, `&quot;after&quot;` or `&quot;append&quot;` depending on whether the mouse is above or below
  98      * the midline of the node, or the node is a branch node which accepts new child nodes.
  99      *
 100      * @param {Function} dropFunction A function to call to complete the data transfer operation and either move or copy
 101      * Model instances from the source View's Store to the destination View's Store.
 102      *
 103      * This is useful when you want to perform some kind of asynchronous processing before confirming the drop, such as
 104      * an {@link Ext.window.MessageBox#confirm confirm} call, or an Ajax request.
 105      *
 106      * Return `0` from this event handler, and call the `dropFunction` at any time to perform the data transfer.
 107      */
 108
 109 <span id='Ext-tree-plugin-TreeViewDragDrop-event-drop'>    /**
 110 </span>     * @event drop
 111      *
 112      * **This event is fired through the TreeView. Add listeners to the TreeView object** Fired when a drop operation
 113      * has been completed and the data has been moved or copied.
 114      *
 115      * @param {HTMLElement} node The TreeView node **if any** over which the mouse was positioned.
 116      *
 117      * @param {Object} data The data object gathered at mousedown time by the cooperating
 118      * {@link Ext.dd.DragZone DragZone}'s {@link Ext.dd.DragZone#getDragData getDragData} method it contains the following
 119      * properties:
 120      * @param {Boolean} data.copy The value of the TreeView's `copy` property, or `true` if the TreeView was configured with
 121      * `allowCopy: true` and the control key was pressed when the drag operation was begun
 122      * @param {Ext.tree.View} data.view The source TreeView from which the drag originated.
 123      * @param {HTMLElement} data.ddel The drag proxy element which moves with the mouse
 124      * @param {HTMLElement} data.item The TreeView node upon which the mousedown event was registered.
 125      * @param {Ext.data.Model[]} data.records An Array of {@link Ext.data.Model Model}s representing the selected data being
 126      * dragged from the source TreeView.
 127      *
 128      * @param {Ext.data.Model} overModel The Model over which the drop gesture took place.
 129      *
 130      * @param {String} dropPosition `&quot;before&quot;`, `&quot;after&quot;` or `&quot;append&quot;` depending on whether the mouse is above or below
 131      * the midline of the node, or the node is a branch node which accepts new child nodes.
 132      */
 133
 134     dragText : '{0} selected node{1}',
 135
 136 <span id='Ext-tree-plugin-TreeViewDragDrop-cfg-allowParentInsert'>    /**
 137 </span>     * @cfg {Boolean} allowParentInsert
 138      * Allow inserting a dragged node between an expanded parent node and its first child that will become a sibling of
 139      * the parent when dropped.
 140      */
 141     allowParentInserts: false,
 142
 143 <span id='Ext-tree-plugin-TreeViewDragDrop-cfg-allowContainerDrop'>    /**
 144 </span>     * @cfg {String} allowContainerDrop
 145      * True if drops on the tree container (outside of a specific tree node) are allowed.
 146      */
 147     allowContainerDrops: false,
 148
 149 <span id='Ext-tree-plugin-TreeViewDragDrop-cfg-appendOnly'>    /**
 150 </span>     * @cfg {String} appendOnly
 151      * True if the tree should only allow append drops (use for trees which are sorted).
 152      */
 153     appendOnly: false,
 154
 155 <span id='Ext-tree-plugin-TreeViewDragDrop-cfg-ddGroup'>    /**
 156 </span>     * @cfg {String} ddGroup
 157      * A named drag drop group to which this object belongs. If a group is specified, then both the DragZones and
 158      * DropZone used by this plugin will only interact with other drag drop objects in the same group.
 159      */
 160     ddGroup : &quot;TreeDD&quot;,
 161
 162 <span id='Ext-tree-plugin-TreeViewDragDrop-cfg-dragGroup'>    /**
 163 </span>     * @cfg {String} dragGroup
 164      * The ddGroup to which the DragZone will belong.
 165      *
 166      * This defines which other DropZones the DragZone will interact with. Drag/DropZones only interact with other
 167      * Drag/DropZones which are members of the same ddGroup.
 168      */
 169
 170 <span id='Ext-tree-plugin-TreeViewDragDrop-cfg-dropGroup'>    /**
 171 </span>     * @cfg {String} dropGroup
 172      * The ddGroup to which the DropZone will belong.
 173      *
 174      * This defines which other DragZones the DropZone will interact with. Drag/DropZones only interact with other
 175      * Drag/DropZones which are members of the same ddGroup.
 176      */
 177
 178 <span id='Ext-tree-plugin-TreeViewDragDrop-cfg-expandDelay'>    /**
 179 </span>     * @cfg {String} expandDelay
 180      * The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node over the
 181      * target.
 182      */
 183     expandDelay : 1000,
 184
 185 <span id='Ext-tree-plugin-TreeViewDragDrop-cfg-enableDrop'>    /**
 186 </span>     * @cfg {Boolean} enableDrop
 187      * Set to `false` to disallow the View from accepting drop gestures.
 188      */
 189     enableDrop: true,
 190
 191 <span id='Ext-tree-plugin-TreeViewDragDrop-cfg-enableDrag'>    /**
 192 </span>     * @cfg {Boolean} enableDrag
 193      * Set to `false` to disallow dragging items from the View.
 194      */
 195     enableDrag: true,
 196
 197 <span id='Ext-tree-plugin-TreeViewDragDrop-cfg-nodeHighlightColor'>    /**
 198 </span>     * @cfg {String} nodeHighlightColor
 199      * The color to use when visually highlighting the dragged or dropped node (default value is light blue).
 200      * The color must be a 6 digit hex value, without a preceding '#'. See also {@link #nodeHighlightOnDrop} and
 201      * {@link #nodeHighlightOnRepair}.
 202      */
 203     nodeHighlightColor: 'c3daf9',
 204
 205 <span id='Ext-tree-plugin-TreeViewDragDrop-cfg-nodeHighlightOnDrop'>    /**
 206 </span>     * @cfg {Boolean} nodeHighlightOnDrop
 207      * Whether or not to highlight any nodes after they are
 208      * successfully dropped on their target. Defaults to the value of `Ext.enableFx`.
 209      * See also {@link #nodeHighlightColor} and {@link #nodeHighlightOnRepair}.
 210      */
 211     nodeHighlightOnDrop: Ext.enableFx,
 212
 213 <span id='Ext-tree-plugin-TreeViewDragDrop-cfg-nodeHighlightOnRepair'>    /**
 214 </span>     * @cfg {Boolean} nodeHighlightOnRepair
 215      * Whether or not to highlight any nodes after they are
 216      * repaired from an unsuccessful drag/drop. Defaults to the value of `Ext.enableFx`.
 217      * See also {@link #nodeHighlightColor} and {@link #nodeHighlightOnDrop}.
 218      */
 219     nodeHighlightOnRepair: Ext.enableFx,
 220
 221     init : function(view) {
 222         view.on('render', this.onViewRender, this, {single: true});
 223     },
 224
 225 <span id='Ext-tree-plugin-TreeViewDragDrop-method-destroy'>    /**
 226 </span>     * @private
 227      * AbstractComponent calls destroy on all its plugins at destroy time.
 228      */
 229     destroy: function() {
 230         Ext.destroy(this.dragZone, this.dropZone);
 231     },
 232
 233     onViewRender : function(view) {
 234         var me = this;
 235
 236         if (me.enableDrag) {
 237             me.dragZone = Ext.create('Ext.tree.ViewDragZone', {
 238                 view: view,
 239                 ddGroup: me.dragGroup || me.ddGroup,
 240                 dragText: me.dragText,
 241                 repairHighlightColor: me.nodeHighlightColor,
 242                 repairHighlight: me.nodeHighlightOnRepair
 243             });
 244         }
 245
 246         if (me.enableDrop) {
 247             me.dropZone = Ext.create('Ext.tree.ViewDropZone', {
 248                 view: view,
 249                 ddGroup: me.dropGroup || me.ddGroup,
 250                 allowContainerDrops: me.allowContainerDrops,
 251                 appendOnly: me.appendOnly,
 252                 allowParentInserts: me.allowParentInserts,
 253                 expandDelay: me.expandDelay,
 254                 dropHighlightColor: me.nodeHighlightColor,
 255                 dropHighlight: me.nodeHighlightOnDrop
 256             });
 257         }
 258     }
 259 });</pre>
 260 </body>
 261 </html>