docs/api/Ext.grid.plugin.DragDrop.html

   1 <!DOCTYPE html><html><head><title>Ext.grid.plugin.DragDrop | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
   2 <style type="text/css">.head-band { display: none; }
   3 .header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
   4 .doc-tab .members .member a.more { background-color: #efefef; }
   5 </style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
   6 </head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
   7 <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
   8
   9     req = {
  10         liveURL: '.',
  11         standAloneMode: true,
  12         origDocClass: 'Ext.grid.plugin.DragDrop',
  13         docClass: 'Ext.grid.plugin.DragDrop',
  14         docReq: 'Ext.grid.plugin.DragDrop',
  15         version: '4.0',
  16         baseURL: '.',
  17         baseDocURL: '.',
  18         baseProdURL: '.'
  19     };
  20
  21     clsInfo = {};
  22
  23
  24
  25 </script>
  26
  27 <script type="text/javascript" src="../search.js"></script>
  28 <!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
  29 <script type="text/javascript" src="../class_tree.js"></script>
  30 <script type="text/javascript" src="../class_doc.js"></script>
  31 <script type="text/javascript">
  32     req.source = 'DragDrop2.html#Ext-grid.plugin.DragDrop';
  33     clsInfo = {"methods":["disable","enable"],"cfgs":["ddGroup","dragGroup","dropGroup","enableDrag","enableDrop"],"properties":["destroy","init"],"events":["beforedrop","drop"],"subclasses":[]};
  34     Ext.onReady(function() {
  35         Ext.create('Docs.classPanel');
  36     });
  37 </script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/DragDrop2.html#Ext-grid.plugin.DragDrop" target="_blank">Ext.grid.plugin.DragDrop</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><pre class="subclasses"><h4>Hierarchy</h4><div class="subclass f"><a href="Ext.AbstractPlugin.html" rel="Ext.AbstractPlugin" class="cls docClass">Ext.AbstractPlugin</a><div class="subclass"><strong>Ext.grid.plugin.DragDrop</strong></div></div></pre><p>This plugin provides drag and/or drop functionality for a GridView.</p>
  38
  39
  40 <p>It creates a specialized instance of <a href="Ext.dd.DragZone.html" rel="Ext.dd.DragZone" class="docClass">DragZone</a> which knows how to drag out of a <a href="Ext.grid.View.html" rel="Ext.grid.View" class="docClass">GridView</a>
  41 and loads the data object which is passed to a cooperating <a href="Ext.dd.DragZone.html" rel="Ext.dd.DragZone" class="docClass">DragZone</a>'s methods with the following properties:<ul>
  42 <li>copy : Boolean
  43  <div class="sub-desc">The value of the GridView's <code>copy</code> property, or <code>true</code> if the GridView was configured
  44  with <code>allowCopy: true</code> <u>and</u> the control key was pressed when the drag operation was begun.</div></li>
  45 <li>view : GridView
  46  <div class="sub-desc">The source GridView from which the drag originated.</div></li>
  47 <li>ddel : HtmlElement
  48  <div class="sub-desc">The drag proxy element which moves with the mouse</div></li>
  49 <li>item : HtmlElement
  50  <div class="sub-desc">The GridView node upon which the mousedown event was registered.</div></li>
  51 <li>records : Array
  52  <div class="sub-desc">An Array of <a href="Ext.data.Model.html" rel="Ext.data.Model" class="docClass">Model</a>s representing the selected data being dragged from the source GridView.</div></li>
  53 </ul></p>
  54
  55
  56 <p>It also creates a specialized instance of <a href="Ext.dd.DropZone.html" rel="Ext.dd.DropZone" class="docClass">Ext.dd.DropZone</a> which cooperates with other DropZones which are members of the same
  57 ddGroup which processes such data objects.</p>
  58
  59
  60 <p>Adding this plugin to a view means that two new events may be fired from the client GridView, <code><a href="Ext.grid.plugin.DragDrop.html#event-beforedrop" rel="Ext.grid.plugin.DragDrop#event-beforedrop" class="docClass">beforedrop</a></code> and
  61 <code><a href="Ext.grid.plugin.DragDrop.html#event-drop" rel="Ext.grid.plugin.DragDrop#event-drop" class="docClass">drop</a></code></p>
  62
  63 <div class="members"><div class="m-cfgs"><div class="definedBy">Defined By</div><a name="configs"></a><h3 class="cfg p">Config Options</h3><h4 class="cfgGroup">Other Configs</h4><div id="config-ddGroup" class="member f ni"><a href="Ext.grid.plugin.DragDrop.html#config-ddGroup" rel="config-ddGroup" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.grid.plugin.DragDrop.html" class="definedIn docClass">Ext.grid.plugin.DragDrop</a><br/><a href="../source/DragDrop2.html#Ext-grid.plugin.DragDrop-cfg-ddGroup" class="viewSource">view source</a></div><a name="ddGroup"></a><a name="config-ddGroup"></a><a href="Ext.grid.plugin.DragDrop.html#" rel="config-ddGroup" class="cls expand">ddGroup</a><span> : String</span></div><div class="description"><div class="short">A named drag drop group to which this object belongs.  If a group is specified, then both the DragZones and DropZone
  64 ...</div><div class="long"><p>A named drag drop group to which this object belongs.  If a group is specified, then both the DragZones and DropZone
  65 used by this plugin will only interact with other drag drop objects in the same group (defaults to 'TreeDD').</p>
  66 </div></div></div><div id="config-dragGroup" class="member ni"><a href="Ext.grid.plugin.DragDrop.html#config-dragGroup" rel="config-dragGroup" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.grid.plugin.DragDrop.html" class="definedIn docClass">Ext.grid.plugin.DragDrop</a><br/><a href="../source/DragDrop2.html#Ext-grid.plugin.DragDrop-cfg-dragGroup" class="viewSource">view source</a></div><a name="dragGroup"></a><a name="config-dragGroup"></a><a href="Ext.grid.plugin.DragDrop.html#" rel="config-dragGroup" class="cls expand">dragGroup</a><span> : String</span></div><div class="description"><div class="short">The ddGroup to which the DragZone will belong.
  67
  68
  69 This defines which other DropZones the DragZone will interact with. ...</div><div class="long"><p>The ddGroup to which the DragZone will belong.</p>
  70
  71
  72 <p>This defines which other DropZones the DragZone will interact with. Drag/DropZones only interact with other Drag/DropZones
  73 which are members of the same ddGroup.</p>
  74
  75 </div></div></div><div id="config-dropGroup" class="member ni"><a href="Ext.grid.plugin.DragDrop.html#config-dropGroup" rel="config-dropGroup" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.grid.plugin.DragDrop.html" class="definedIn docClass">Ext.grid.plugin.DragDrop</a><br/><a href="../source/DragDrop2.html#Ext-grid.plugin.DragDrop-cfg-dropGroup" class="viewSource">view source</a></div><a name="dropGroup"></a><a name="config-dropGroup"></a><a href="Ext.grid.plugin.DragDrop.html#" rel="config-dropGroup" class="cls expand">dropGroup</a><span> : String</span></div><div class="description"><div class="short">The ddGroup to which the DropZone will belong.
  76
  77
  78 This defines which other DragZones the DropZone will interact with. ...</div><div class="long"><p>The ddGroup to which the DropZone will belong.</p>
  79
  80
  81 <p>This defines which other DragZones the DropZone will interact with. Drag/DropZones only interact with other Drag/DropZones
  82 which are members of the same ddGroup.</p>
  83
  84 </div></div></div><div id="config-enableDrag" class="member ni"><a href="Ext.grid.plugin.DragDrop.html#config-enableDrag" rel="config-enableDrag" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.grid.plugin.DragDrop.html" class="definedIn docClass">Ext.grid.plugin.DragDrop</a><br/><a href="../source/DragDrop2.html#Ext-grid.plugin.DragDrop-cfg-enableDrag" class="viewSource">view source</a></div><a name="enableDrag"></a><a name="config-enableDrag"></a><a href="Ext.grid.plugin.DragDrop.html#" rel="config-enableDrag" class="cls expand">enableDrag</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Defaults to <code>true</code></p>
  85
  86
  87 <p>Set to <code>false</code> to disallow dragging items from the View </p>
  88
  89 </div><div class="long"><p>Defaults to <code>true</code></p>
  90
  91
  92 <p>Set to <code>false</code> to disallow dragging items from the View </p>
  93
  94 </div></div></div><div id="config-enableDrop" class="member ni"><a href="Ext.grid.plugin.DragDrop.html#config-enableDrop" rel="config-enableDrop" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.grid.plugin.DragDrop.html" class="definedIn docClass">Ext.grid.plugin.DragDrop</a><br/><a href="../source/DragDrop2.html#Ext-grid.plugin.DragDrop-cfg-enableDrop" class="viewSource">view source</a></div><a name="enableDrop"></a><a name="config-enableDrop"></a><a href="Ext.grid.plugin.DragDrop.html#" rel="config-enableDrop" class="cls expand">enableDrop</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Defaults to <code>true</code></p>
  95
  96
  97 <p>Set to <code>false</code> to disallow the View from accepting drop gestures</p>
  98
  99 </div><div class="long"><p>Defaults to <code>true</code></p>
 100
 101
 102 <p>Set to <code>false</code> to disallow the View from accepting drop gestures</p>
 103
 104 </div></div></div></div><div class="m-properties"><a name="properties"></a><div class="definedBy">Defined By</div><h3 class="prp p">Properties</h3><div id="property-destroy" class="member f inherited"><a href="Ext.grid.plugin.DragDrop.html#property-destroy" rel="property-destroy" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.AbstractPlugin.html" class="definedIn docClass">Ext.AbstractPlugin</a><br/><a href="../source/AbstractPlugin.html#Ext-AbstractPlugin-property-destroy" class="viewSource">view source</a></div><a name="destroy"></a><a name="property-destroy"></a><a href="Ext.grid.plugin.DragDrop.html#" rel="property-destroy" class="cls expand">destroy</a><span> : Object</span></div><div class="description"><div class="short">The destroy method is invoked by the owning Component at the time the Component is being destroyed.
 105 Use this method t...</div><div class="long"><p>The destroy method is invoked by the owning Component at the time the Component is being destroyed.
 106 Use this method to clean up an resources.</p>
 107 </div></div></div><div id="property-init" class="member inherited"><a href="Ext.grid.plugin.DragDrop.html#property-init" rel="property-init" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.AbstractPlugin.html" class="definedIn docClass">Ext.AbstractPlugin</a><br/><a href="../source/AbstractPlugin.html#Ext-AbstractPlugin-property-init" class="viewSource">view source</a></div><a name="init"></a><a name="property-init"></a><a href="Ext.grid.plugin.DragDrop.html#" rel="property-init" class="cls expand">init</a><span> : Object</span></div><div class="description"><div class="short"><p>The init method is invoked after initComponent has been run for the
 108 component which we are injecting the plugin into.</p>
 109 </div><div class="long"><p>The init method is invoked after initComponent has been run for the
 110 component which we are injecting the plugin into.</p>
 111 </div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-disable" class="member f inherited"><a href="Ext.grid.plugin.DragDrop.html#method-disable" rel="method-disable" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.AbstractPlugin.html" class="definedIn docClass">Ext.AbstractPlugin</a><br/><a href="../source/AbstractPlugin.html#Ext-AbstractPlugin-method-disable" class="viewSource">view source</a></div><a name="disable"></a><a name="method-disable"></a><a href="Ext.grid.plugin.DragDrop.html#" rel="method-disable" class="cls expand">disable</a> : void</div><div class="description"><div class="short"><p>Disable the plugin and set the disabled flag to true.</p>
 112 </div><div class="long"><p>Disable the plugin and set the disabled flag to true.</p>
 113 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 114 </li></ul></div></div></div><div id="method-enable" class="member inherited"><a href="Ext.grid.plugin.DragDrop.html#method-enable" rel="method-enable" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.AbstractPlugin.html" class="definedIn docClass">Ext.AbstractPlugin</a><br/><a href="../source/AbstractPlugin.html#Ext-AbstractPlugin-method-enable" class="viewSource">view source</a></div><a name="enable"></a><a name="method-enable"></a><a href="Ext.grid.plugin.DragDrop.html#" rel="method-enable" class="cls expand">enable</a> : void</div><div class="description"><div class="short"><p>Enable the plugin and set the disabled flag to false.</p>
 115 </div><div class="long"><p>Enable the plugin and set the disabled flag to false.</p>
 116 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 117 </li></ul></div></div></div></div><div class="m-events"><a name="events"></a><div class="definedBy">Defined By</div><h3 class="evt p">Events</h3><div id="event-beforedrop" class="member f ni"><a href="Ext.grid.plugin.DragDrop.html#event-beforedrop" rel="event-beforedrop" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.grid.plugin.DragDrop.html" class="definedIn docClass">Ext.grid.plugin.DragDrop</a><br/><a href="../source/DragDrop2.html#Ext-grid.plugin.DragDrop-event-beforedrop" class="viewSource">view source</a></div><a name="beforedrop"></a><a name="event-beforedrop"></a><a href="Ext.grid.plugin.DragDrop.html#" rel="event-beforedrop" class="cls expand">beforedrop</a>(
 118 <span class="pre">HtmlElement node, Object data, Ext.data.Model overModel, String dropPosition, Function dropFunction</span>)
 119 </div><div class="description"><div class="short">This event is fired through the GridView. Add listeners to the GridView object
 120
 121
 122 Fired when a drop gesture has been t...</div><div class="long"><p><b>This event is fired through the GridView. Add listeners to the GridView object</b></p>
 123
 124
 125 <p>Fired when a drop gesture has been triggered by a mouseup event in a valid drop position in the GridView.
 126
 127 <h3 class="pa">Parameters</h3><ul><li><span class="pre">node</span> : HtmlElement<div class="sub-desc"><p>The GridView node <b>if any</b> over which the mouse was positioned.</p></p>
 128
 129 <p>Returning <code>false</code> to this event signals that the drop gesture was invalid, and if the drag proxy
 130 will animate back to the point from which the drag began.</p>
 131
 132
 133 <p>Returning <code>0</code> To this event signals that the data transfer operation should not take place, but
 134 that the gesture was valid, and that the repair operation should not take place.</p>
 135
 136
 137 <p>Any other return value continues with the data transfer operation.</p>
 138
 139 </div></li><li><span class="pre">data</span> : Object<div class="sub-desc"><p>The data object gathered at mousedown time by the cooperating <a href="Ext.dd.DragZone.html" rel="Ext.dd.DragZone" class="docClass">DragZone</a>'s
 140 <a href="Ext.dd.DragZone.html#getDragData" rel="Ext.dd.DragZone#getDragData" class="docClass">getDragData</a> method it contains the following properties:<ul>
 141 <li>copy : Boolean
 142  <div class="sub-desc">The value of the GridView's <code>copy</code> property, or <code>true</code> if the GridView was configured
 143  with <code>allowCopy: true</code> and the control key was pressed when the drag operation was begun</div></li>
 144 <li>view : GridView
 145  <div class="sub-desc">The source GridView from which the drag originated.</div></li>
 146 <li>ddel : HtmlElement
 147  <div class="sub-desc">The drag proxy element which moves with the mouse</div></li>
 148 <li>item : HtmlElement
 149  <div class="sub-desc">The GridView node upon which the mousedown event was registered.</div></li>
 150 <li>records : Array
 151  <div class="sub-desc">An Array of <a href="Ext.data.Model.html" rel="Ext.data.Model" class="docClass">Model</a>s representing the selected data being dragged from the source GridView.</div></li>
 152 </ul></p>
 153 </div></li><li><span class="pre">overModel</span> : Ext.data.Model<div class="sub-desc"><p>The Model over which the drop gesture took place.</p>
 154 </div></li><li><span class="pre">dropPosition</span> : String<div class="sub-desc"><p><code>"before"</code> or <code>"after"</code> depending on whether the mouse is above or below the midline of the node.</p>
 155 </div></li><li><span class="pre">dropFunction</span> : Function<div class="sub-desc"><p>A function to call to complete the data transfer operation and either move or copy Model instances from the source
 156 View's Store to the destination View's Store.</p>
 157
 158
 159 <p>This is useful when you want to perform some kind of asynchronous processing before confirming
 160 the drop, such as an <a href="Ext.window.MessageBox.html#confirm" rel="Ext.window.MessageBox#confirm" class="docClass">confirm</a> call, or an Ajax request.</p>
 161
 162
 163 <p>Return <code>0</code> from this event handler, and call the <code>dropFunction</code> at any time to perform the data transfer.</p>
 164
 165 </div></li></ul></div></div></div><div id="event-drop" class="member ni"><a href="Ext.grid.plugin.DragDrop.html#event-drop" rel="event-drop" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.grid.plugin.DragDrop.html" class="definedIn docClass">Ext.grid.plugin.DragDrop</a><br/><a href="../source/DragDrop2.html#Ext-grid.plugin.DragDrop-event-drop" class="viewSource">view source</a></div><a name="drop"></a><a name="event-drop"></a><a href="Ext.grid.plugin.DragDrop.html#" rel="event-drop" class="cls expand">drop</a>(
 166 <span class="pre">HtmlElement node, Object data, Ext.data.Model overModel, String dropPosition</span>)
 167 </div><div class="description"><div class="short">This event is fired through the GridView. Add listeners to the GridView object
 168 Fired when a drop operation has been c...</div><div class="long"><p><b>This event is fired through the GridView. Add listeners to the GridView object</b>
 169 Fired when a drop operation has been completed and the data has been moved or copied.</p>
 170 <h3 class="pa">Parameters</h3><ul><li><span class="pre">node</span> : HtmlElement<div class="sub-desc"><p>The GridView node <b>if any</b> over which the mouse was positioned.</p>
 171 </div></li><li><span class="pre">data</span> : Object<div class="sub-desc"><p>The data object gathered at mousedown time by the cooperating <a href="Ext.dd.DragZone.html" rel="Ext.dd.DragZone" class="docClass">DragZone</a>'s
 172 <a href="Ext.dd.DragZone.html#getDragData" rel="Ext.dd.DragZone#getDragData" class="docClass">getDragData</a> method it contains the following properties:<ul>
 173 <li>copy : Boolean
 174  <div class="sub-desc">The value of the GridView's <code>copy</code> property, or <code>true</code> if the GridView was configured
 175  with <code>allowCopy: true</code> and the control key was pressed when the drag operation was begun</div></li>
 176 <li>view : GridView
 177  <div class="sub-desc">The source GridView from which the drag originated.</div></li>
 178 <li>ddel : HtmlElement
 179  <div class="sub-desc">The drag proxy element which moves with the mouse</div></li>
 180 <li>item : HtmlElement
 181  <div class="sub-desc">The GridView node upon which the mousedown event was registered.</div></li>
 182 <li>records : Array
 183  <div class="sub-desc">An Array of <a href="Ext.data.Model.html" rel="Ext.data.Model" class="docClass">Model</a>s representing the selected data being dragged from the source GridView.</div></li>
 184 </ul></p>
 185 </div></li><li><span class="pre">overModel</span> : Ext.data.Model<div class="sub-desc"><p>The Model over which the drop gesture took place.</p>
 186 </div></li><li><span class="pre">dropPosition</span> : String<div class="sub-desc"><p><code>"before"</code> or <code>"after"</code> depending on whether the mouse is above or below the midline of the node.</p>
 187 </div></li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>