-<div xmlns:ext="http://www.extjs.com" class="body-wrap"><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.dd.DragDrop.html" ext:member="" ext:cls="Ext.dd.DragDrop">DragDrop</a> <img src="resources/elbow-end.gif"><a href="output/Ext.dd.DDTarget.html" ext:member="" ext:cls="Ext.dd.DDTarget">DDTarget</a> <img src="resources/elbow-end.gif"><a href="output/Ext.dd.DropTarget.html" ext:member="" ext:cls="Ext.dd.DropTarget">DropTarget</a> <img src="resources/elbow-end.gif">DropZone</pre></div><h1>Class <a href="source/DropZone.html#cls-Ext.dd.DropZone">Ext.dd.DropZone</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.dd</td></tr><tr><td class="label">Defined In:</td><td class="hd-info">DropZone.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/DropZone.html#cls-Ext.dd.DropZone">DropZone</a></td></tr><tr><td class="label">Subclasses:</td><td class="hd-info"><a href="output/Ext.tree.TreeDropZone.html" ext:cls="Ext.tree.TreeDropZone">TreeDropZone</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.dd.DropTarget.html" ext:cls="Ext.dd.DropTarget" ext:member="">DropTarget</a></td></tr></table><div class="description"><p>This class provides a container DD instance that allows dropping on multiple child target nodes.</p>\r
-<p>By default, this class requires that child nodes accepting drop are registered with <a href="output/Ext.dd.Registry.html" ext:cls="Ext.dd.Registry">Ext.dd.Registry</a>.\r
-However a simpler way to allow a DropZone to manage any number of target elements is to configure the\r
-DropZone with an implementation of <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-getTargetFromEvent" ext:member="getTargetFromEvent" ext:cls="Ext.dd.DropZone">getTargetFromEvent</a> which interrogates the passed\r
-mouse event to see if it has taken place within an element, or class of elements. This is easily done\r
-by using the event's <a href="output/Ext.EventObject.html#Ext.EventObject-getTarget" ext:member="getTarget" ext:cls="Ext.EventObject">getTarget</a> method to identify a node based on a\r
-<a href="output/Ext.DomQuery.html" ext:cls="Ext.DomQuery">Ext.DomQuery</a> selector.</p>\r
-<p>Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over\r
-a drop target, that target is passed as the first parameter to <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeEnter" ext:member="onNodeEnter" ext:cls="Ext.dd.DropZone">onNodeEnter</a>, <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeOver" ext:member="onNodeOver" ext:cls="Ext.dd.DropZone">onNodeOver</a>,\r
-<a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeOut" ext:member="onNodeOut" ext:cls="Ext.dd.DropZone">onNodeOut</a>, <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeDrop" ext:member="onNodeDrop" ext:cls="Ext.dd.DropZone">onNodeDrop</a>. You may configure the instance of DropZone with implementations\r
-of these methods to provide application-specific behaviour for these events to update both\r
-application state, and UI state.</p>\r
-<p>For example to make a GridPanel a cooperating target with the example illustrated in\r
-<a href="output/Ext.dd.DragZone.html" ext:cls="Ext.dd.DragZone">DragZone</a>, the following technique might be used:</p><pre><code>myGridPanel.on(<em>'render'</em>, <b>function</b>() {\r
- myGridPanel.dropZone = <b>new</b> Ext.dd.DropZone(myGridPanel.getView().scroller, {\r
-\r
-<i>// If the mouse is over a grid row, <b>return</b> that node. This is\r</i>
-<i>// provided as the <em>"target"</em> parameter <b>in</b> all <em>"onNodeXXXX"</em> node event handling functions\r</i>
- getTargetFromEvent: <b>function</b>(e) {\r
- <b>return</b> e.getTarget(myGridPanel.getView().rowSelector);\r
- },\r
-\r
-<i>// On entry into a target node, highlight that node.\r</i>
- onNodeEnter : <b>function</b>(target, dd, e, data){ \r
- Ext.fly(target).addClass(<em>'my-row-highlight-class'</em>);\r
- },\r
-\r
-<i>// On exit from a target node, unhighlight that node.\r</i>
- onNodeOut : <b>function</b>(target, dd, e, data){ \r
- Ext.fly(target).removeClass(<em>'my-row-highlight-class'</em>);\r
- },\r
-\r
-<i>// While over a target node, <b>return</b> the <b>default</b> drop allowed class which\r</i>
-<i>// places a <em>"tick"</em> icon into the drag proxy.\r</i>
- onNodeOver : <b>function</b>(target, dd, e, data){ \r
- <b>return</b> Ext.dd.DropZone.prototype.dropAllowed;\r
- },\r
-\r
-<i>// On node drop we can interrogate the target to find the underlying\r</i>
-<i>// application object that is the real target of the dragged data.\r</i>
-<i>// In this <b>case</b>, it is a Record <b>in</b> the GridPanel<em>'s Store.\r</i>
-<i>// We can use the data set up by the DragZone'</em>s getDragData method to read\r</i>
-<i>// any data we decided to attach <b>in</b> the DragZone<em>'s getDragData method.\r</i>
- onNodeDrop : <b>function</b>(target, dd, e, data){\r
- <b>var</b> rowIndex = myGridPanel.getView().findRowIndex(target);\r
- <b>var</b> r = myGridPanel.getStore().getAt(rowIndex);\r
- Ext.Msg.alert('</em>Drop gesture<em>', '</em>Dropped Record id <em>' + data.draggedRecord.id +\r
- '</em> on Record id <em>' + r.id);\r
- <b>return</b> true;\r
- }\r
- });\r
-}</code></pre>\r
-See the <a href="output/Ext.dd.DragZone.html" ext:cls="Ext.dd.DragZone">DragZone</a> documentation for details about building a DragZone which\r
-cooperates with this DropZone.</div><div class="hr"></div><a id="Ext.dd.DropZone-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DropTarget-ddGroup"></a><b><a href="source/DropTarget.html#cfg-Ext.dd.DropTarget-ddGroup">ddGroup</a></b> : String<div class="mdesc"><div class="short">A named drag drop group to which this object belongs. If a group is specified, then this object will only
-interact ...</div><div class="long">A named drag drop group to which this object belongs. If a group is specified, then this object will only\r
-interact with other drag drop objects in the same group (defaults to undefined).</div></div></td><td class="msource"><a href="output/Ext.dd.DropTarget.html#ddGroup" ext:member="#ddGroup" ext:cls="Ext.dd.DropTarget">DropTarget</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DropTarget-dropAllowed"></a><b><a href="source/DropTarget.html#cfg-Ext.dd.DropTarget-dropAllowed">dropAllowed</a></b> : String<div class="mdesc">The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").</div></td><td class="msource"><a href="output/Ext.dd.DropTarget.html#dropAllowed" ext:member="#dropAllowed" ext:cls="Ext.dd.DropTarget">DropTarget</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DropTarget-dropNotAllowed"></a><b><a href="source/DropTarget.html#cfg-Ext.dd.DropTarget-dropNotAllowed">dropNotAllowed</a></b> : String<div class="mdesc">The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").</div></td><td class="msource"><a href="output/Ext.dd.DropTarget.html#dropNotAllowed" ext:member="#dropNotAllowed" ext:cls="Ext.dd.DropTarget">DropTarget</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DropTarget-overClass"></a><b><a href="source/DropTarget.html#cfg-Ext.dd.DropTarget-overClass">overClass</a></b> : String<div class="mdesc">The CSS class applied to the drop target element while the drag source is over it (defaults to "").</div></td><td class="msource"><a href="output/Ext.dd.DropTarget.html#overClass" ext:member="#overClass" ext:cls="Ext.dd.DropTarget">DropTarget</a></td></tr></tbody></table><a id="Ext.dd.DropZone-props"></a><h2>Public Properties</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Property</th><th class="msource-header">Defined By</th></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragDrop-Only"></a><b><a href="source/DDCore.html#prop-Ext.dd.DragDrop-Only">Only</a></b> : Object<div class="mdesc"><div class="short">The drag and drop utility provides a framework for building drag and drop
-applications. In addition to enabling drag...</div><div class="long">The drag and drop utility provides a framework for building drag and drop
-applications. In addition to enabling drag and drop for specific elements,
-the drag and drop elements are tracked by the manager class, and the
-interactions between the various elements are tracked during the drag and
-the implementing code is notified about these important moments.</div></div></td><td class="msource"><a href="output/Ext.dd.DragDrop.html#Only" ext:member="#Only" ext:cls="Ext.dd.DragDrop">DragDrop</a></td></tr><tr class="property-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragDrop-available"></a><b><a href="source/DDCore.html#prop-Ext.dd.DragDrop-available">available</a></b> : boolean<div class="mdesc">The availabe property is false until the linked dom element is accessible.</div></td><td class="msource"><a href="output/Ext.dd.DragDrop.html#available" ext:member="#available" ext:cls="Ext.dd.DragDrop">DragDrop</a></td></tr><tr class="property-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragDrop-config"></a><b><a href="source/DDCore.html#prop-Ext.dd.DragDrop-config">config</a></b> : object<div class="mdesc">Configuration attributes passed into the constructor</div></td><td class="msource"><a href="output/Ext.dd.DragDrop.html#config" ext:member="#config" ext:cls="Ext.dd.DragDrop">DragDrop</a></td></tr><tr class="property-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragDrop-defaultPadding"></a><b><a href="source/DDCore.html#prop-Ext.dd.DragDrop-defaultPadding">defaultPadding</a></b> : Object<div class="mdesc">Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).</div></td><td class="msource"><a href="output/Ext.dd.DragDrop.html#defaultPadding" ext:member="#defaultPadding" ext:cls="Ext.dd.DragDrop">DragDrop</a></td></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragDrop-groups"></a><b><a href="source/DDCore.html#prop-Ext.dd.DragDrop-groups">groups</a></b> : object An object in the format {'group1':true, 'group2':true<div class="mdesc"><div class="short">The group defines a logical collection of DragDrop objects that are
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.dd.DropZone-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.dd.DropZone-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.dd.DropZone-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.dd.DropZone-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.dd.DropZone"><img src="resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.dd.DragDrop.html" ext:member="" ext:cls="Ext.dd.DragDrop">DragDrop</a>
+ <img src="resources/elbow-end.gif"><a href="output/Ext.dd.DDTarget.html" ext:member="" ext:cls="Ext.dd.DDTarget">DDTarget</a>
+ <img src="resources/elbow-end.gif"><a href="output/Ext.dd.DropTarget.html" ext:member="" ext:cls="Ext.dd.DropTarget">DropTarget</a>
+ <img src="resources/elbow-end.gif">DropZone</pre></div><h1>Class <a href="source/DropZone.html#cls-Ext.dd.DropZone">Ext.dd.DropZone</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.dd</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/DropZone.html#cls-Ext.dd.DropZone">DropZone.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/DropZone.html#cls-Ext.dd.DropZone">DropZone</a></td></tr><tr><td class="label">Subclasses:</td><td class="hd-info"><a href="output/Ext.tree.TreeDropZone.html" ext:cls="Ext.tree.TreeDropZone">TreeDropZone</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.dd.DropTarget.html" ext:cls="Ext.dd.DropTarget" ext:member="">DropTarget</a></td></tr></table><div class="description"><p>This class provides a container DD instance that allows dropping on multiple child target nodes.</p>
+<p>By default, this class requires that child nodes accepting drop are registered with <a href="output/Ext.dd.Registry.html" ext:cls="Ext.dd.Registry">Ext.dd.Registry</a>.
+However a simpler way to allow a DropZone to manage any number of target elements is to configure the
+DropZone with an implementation of <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-getTargetFromEvent" ext:member="getTargetFromEvent" ext:cls="Ext.dd.DropZone">getTargetFromEvent</a> which interrogates the passed
+mouse event to see if it has taken place within an element, or class of elements. This is easily done
+by using the event's <a href="output/Ext.EventObject.html#Ext.EventObject-getTarget" ext:member="getTarget" ext:cls="Ext.EventObject">getTarget</a> method to identify a node based on a
+<a href="output/Ext.DomQuery.html" ext:cls="Ext.DomQuery">Ext.DomQuery</a> selector.</p>
+<p>Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over
+a drop target, that target is passed as the first parameter to <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeEnter" ext:member="onNodeEnter" ext:cls="Ext.dd.DropZone">onNodeEnter</a>, <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeOver" ext:member="onNodeOver" ext:cls="Ext.dd.DropZone">onNodeOver</a>,
+<a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeOut" ext:member="onNodeOut" ext:cls="Ext.dd.DropZone">onNodeOut</a>, <a href="output/Ext.dd.DropZone.html#Ext.dd.DropZone-onNodeDrop" ext:member="onNodeDrop" ext:cls="Ext.dd.DropZone">onNodeDrop</a>. You may configure the instance of DropZone with implementations
+of these methods to provide application-specific behaviour for these events to update both
+application state, and UI state.</p>
+<p>For example to make a GridPanel a cooperating target with the example illustrated in
+<a href="output/Ext.dd.DragZone.html" ext:cls="Ext.dd.DragZone">DragZone</a>, the following technique might be used:</p><pre><code>myGridPanel.on(<em>'render'</em>, <b>function</b>() {
+ myGridPanel.dropZone = <b>new</b> Ext.dd.DropZone(myGridPanel.getView().scroller, {
+
+<i>// If the mouse is over a grid row, <b>return</b> that node. This is</i>
+<i>// provided as the <em>"target"</em> parameter <b>in</b> all <em>"onNodeXXXX"</em> node event handling functions</i>
+ getTargetFromEvent: <b>function</b>(e) {
+ <b>return</b> e.getTarget(myGridPanel.getView().rowSelector);
+ },
+
+<i>// On entry into a target node, highlight that node.</i>
+ onNodeEnter : <b>function</b>(target, dd, e, data){
+ Ext.fly(target).addClass(<em>'my-row-highlight-class'</em>);
+ },
+
+<i>// On exit from a target node, unhighlight that node.</i>
+ onNodeOut : <b>function</b>(target, dd, e, data){
+ Ext.fly(target).removeClass(<em>'my-row-highlight-class'</em>);
+ },
+
+<i>// While over a target node, <b>return</b> the <b>default</b> drop allowed class which</i>
+<i>// places a <em>"tick"</em> icon into the drag proxy.</i>
+ onNodeOver : <b>function</b>(target, dd, e, data){
+ <b>return</b> Ext.dd.DropZone.prototype.dropAllowed;
+ },
+
+<i>// On node drop we can interrogate the target to find the underlying</i>
+<i>// application object that is the real target of the dragged data.</i>
+<i>// In this <b>case</b>, it is a Record <b>in</b> the GridPanel<em>'s Store.</i>
+<i>// We can use the data set up by the DragZone'</em>s getDragData method to read</i>
+<i>// any data we decided to attach <b>in</b> the DragZone<em>'s getDragData method.</i>
+ onNodeDrop : <b>function</b>(target, dd, e, data){
+ <b>var</b> rowIndex = myGridPanel.getView().findRowIndex(target);
+ <b>var</b> r = myGridPanel.getStore().getAt(rowIndex);
+ Ext.Msg.alert('</em>Drop gesture<em>', '</em>Dropped Record id <em>' + data.draggedRecord.id +
+ '</em> on Record id <em>' + r.id);
+ <b>return</b> true;
+ }
+ });
+}</code></pre>
+See the <a href="output/Ext.dd.DragZone.html" ext:cls="Ext.dd.DragZone">DragZone</a> documentation for details about building a DragZone which
+cooperates with this DropZone.</div><div class="hr"></div><a id="Ext.dd.DropZone-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DropTarget-ddGroup"></a><b><a href="source/DropTarget.html#cfg-Ext.dd.DropTarget-ddGroup">ddGroup</a></b> : String<div class="mdesc"><div class="short">A named drag drop group to which this object belongs. If a group is specified, then this object will only
+interact w...</div><div class="long">A named drag drop group to which this object belongs. If a group is specified, then this object will only
+interact with other drag drop objects in the same group (defaults to undefined).</div></div></td><td class="msource"><a href="output/Ext.dd.DropTarget.html#ddGroup" ext:member="#ddGroup" ext:cls="Ext.dd.DropTarget">DropTarget</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DropTarget-dropAllowed"></a><b><a href="source/DropTarget.html#cfg-Ext.dd.DropTarget-dropAllowed">dropAllowed</a></b> : String<div class="mdesc">The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").</div></td><td class="msource"><a href="output/Ext.dd.DropTarget.html#dropAllowed" ext:member="#dropAllowed" ext:cls="Ext.dd.DropTarget">DropTarget</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DropTarget-dropNotAllowed"></a><b><a href="source/DropTarget.html#cfg-Ext.dd.DropTarget-dropNotAllowed">dropNotAllowed</a></b> : String<div class="mdesc">The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").</div></td><td class="msource"><a href="output/Ext.dd.DropTarget.html#dropNotAllowed" ext:member="#dropNotAllowed" ext:cls="Ext.dd.DropTarget">DropTarget</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DropTarget-overClass"></a><b><a href="source/DropTarget.html#cfg-Ext.dd.DropTarget-overClass">overClass</a></b> : String<div class="mdesc">The CSS class applied to the drop target element while the drag source is over it (defaults to "").</div></td><td class="msource"><a href="output/Ext.dd.DropTarget.html#overClass" ext:member="#overClass" ext:cls="Ext.dd.DropTarget">DropTarget</a></td></tr></tbody></table><a id="Ext.dd.DropZone-props"></a><h2>Public Properties</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Property</th><th class="msource-header">Defined By</th></tr><tr class="property-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragDrop-available"></a><b><a href="source/DDCore.html#prop-Ext.dd.DragDrop-available">available</a></b> : boolean<div class="mdesc">The available property is false until the linked dom element is accessible.</div></td><td class="msource"><a href="output/Ext.dd.DragDrop.html#available" ext:member="#available" ext:cls="Ext.dd.DragDrop">DragDrop</a></td></tr><tr class="property-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragDrop-config"></a><b><a href="source/DDCore.html#prop-Ext.dd.DragDrop-config">config</a></b> : object<div class="mdesc">Configuration attributes passed into the constructor</div></td><td class="msource"><a href="output/Ext.dd.DragDrop.html#config" ext:member="#config" ext:cls="Ext.dd.DragDrop">DragDrop</a></td></tr><tr class="property-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragDrop-defaultPadding"></a><b><a href="source/DDCore.html#prop-Ext.dd.DragDrop-defaultPadding">defaultPadding</a></b> : Object<div class="mdesc">Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).</div></td><td class="msource"><a href="output/Ext.dd.DragDrop.html#defaultPadding" ext:member="#defaultPadding" ext:cls="Ext.dd.DragDrop">DragDrop</a></td></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragDrop-groups"></a><b><a href="source/DDCore.html#prop-Ext.dd.DragDrop-groups">groups</a></b> : object An object in the format {'group1':true, 'group2':true<div class="mdesc"><div class="short">The group defines a logical collection of DragDrop objects that are
git.ithinksw.org / extjs.git / blobdiff