-<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.dd.DragZone-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.dd.DragZone-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.dd.DragZone-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.dd.DragZone-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.dd.DragZone"><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.DD.html" ext:member="" ext:cls="Ext.dd.DD">DD</a> <img src="resources/elbow-end.gif"><a href="output/Ext.dd.DDProxy.html" ext:member="" ext:cls="Ext.dd.DDProxy">DDProxy</a> <img src="resources/elbow-end.gif"><a href="output/Ext.dd.DragSource.html" ext:member="" ext:cls="Ext.dd.DragSource">DragSource</a> <img src="resources/elbow-end.gif">DragZone</pre></div><h1>Class <a href="source/DragZone.html#cls-Ext.dd.DragZone">Ext.dd.DragZone</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">DragZone.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/DragZone.html#cls-Ext.dd.DragZone">DragZone</a></td></tr><tr><td class="label">Subclasses:</td><td class="hd-info"><a href="output/Ext.grid.GridDragZone.html" ext:cls="Ext.grid.GridDragZone">GridDragZone</a>, <a href="output/Ext.tree.TreeDragZone.html" ext:cls="Ext.tree.TreeDragZone">TreeDragZone</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.dd.DragSource.html" ext:cls="Ext.dd.DragSource" ext:member="">DragSource</a></td></tr><tr><td class="hd-info"></td></tr></table><div class="description"><p>This class provides a container DD instance that allows dragging of multiple child source nodes.</p>\r
-<p>This class does not move the drag target nodes, but a proxy element which may contain\r
-any DOM structure you wish. The DOM element to show in the proxy is provided by either a\r
-provided implementation of <a href="output/Ext.dd.DragZone.html#Ext.dd.DragZone-getDragData" ext:member="getDragData" ext:cls="Ext.dd.DragZone">getDragData</a>, or by registered draggables registered with <a href="output/Ext.dd.Registry.html" ext:cls="Ext.dd.Registry">Ext.dd.Registry</a></p>\r
-<p>If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some\r
-application object (For example nodes in a <a href="output/Ext.DataView.html" ext:cls="Ext.DataView">DataView</a>) then use of this class\r
-is the most efficient way to "activate" those nodes.</p>\r
-<p>By default, this class requires that draggable child nodes 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 DragZone to manage any number of draggable elements is to configure\r
-the DragZone with an implementation of the <a href="output/Ext.dd.DragZone.html#Ext.dd.DragZone-getDragData" ext:member="getDragData" ext:cls="Ext.dd.DragZone">getDragData</a> method 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. For example, to make the nodes of a DataView draggable, use the following\r
-technique. Knowledge of the use of the DataView is required:</p><pre><code>myDataView.on(<em>'render'</em>, <b>function</b>() {\r
- myDataView.dragZone = <b>new</b> Ext.dd.DragZone(myDataView.getEl(), {\r
-\r
-<i>// On receipt of a mousedown event, see <b>if</b> it is within a DataView node.\r</i>
-<i>// Return a drag data object <b>if</b> so.\r</i>
- getDragData: <b>function</b>(e) {\r
-\r
-<i>// Use the DataView<em>'s own itemSelector (a mandatory property) to\r</i>
-<i>// test <b>if</b> the mousedown is within one of the DataView'</em>s nodes.\r</i>
- <b>var</b> sourceEl = e.getTarget(myDataView.itemSelector, 10);\r
-\r
-<i>// If the mousedown is within a DataView node, clone the node to produce\r</i>
-<i>// a ddel element <b>for</b> use by the drag proxy. Also add application data\r</i>
-<i>// to the returned data object.\r</i>
- <b>if</b> (sourceEl) {\r
- d = sourceEl.cloneNode(true);\r
- d.id = Ext.id();\r
- <b>return</b> {\r
- ddel: d,\r
- sourceEl: sourceEl,\r
- repairXY: Ext.fly(sourceEl).getXY(),\r
- sourceStore: myDataView.store,\r
- draggedRecord: v.getRecord(sourceEl)\r
- }\r
- }\r
- },\r
-\r
-<i>// Provide coordinates <b>for</b> the proxy to slide back to on failed drag.\r</i>
-<i>// This is the original XY coordinates of the draggable element captured\r</i>
-<i>// <b>in</b> the getDragData method.\r</i>
- getRepairXY: <b>function</b>() {\r
- <b>return</b> this.dragData.repairXY;\r
- }\r
- });\r
-});</code></pre>\r
-See the <a href="output/Ext.dd.DropZone.html" ext:cls="Ext.dd.DropZone">DropZone</a> documentation for details about building a DropZone which\r
-cooperates with this DragZone.</div><div class="hr"></div><a id="Ext.dd.DragZone-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 "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragZone-containerScroll"></a><b><a href="source/DragZone.html#cfg-Ext.dd.DragZone-containerScroll">containerScroll</a></b> : Boolean<div class="mdesc">True to register this container with the Scrollmanager\r
-for auto scrolling during drag operations.</div></td><td class="msource">DragZone</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragSource-ddGroup"></a><b><a href="source/DragSource.html#cfg-Ext.dd.DragSource-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 \r
-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.DragSource.html#ddGroup" ext:member="#ddGroup" ext:cls="Ext.dd.DragSource">DragSource</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.DragSource-dropAllowed"></a><b><a href="source/DragSource.html#cfg-Ext.dd.DragSource-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.DragSource.html#dropAllowed" ext:member="#dropAllowed" ext:cls="Ext.dd.DragSource">DragSource</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.DragSource-dropNotAllowed"></a><b><a href="source/DragSource.html#cfg-Ext.dd.DragSource-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.DragSource.html#dropNotAllowed" ext:member="#dropNotAllowed" ext:cls="Ext.dd.DragSource">DragSource</a></td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragZone-hlColor"></a><b><a href="source/DragZone.html#cfg-Ext.dd.DragZone-hlColor">hlColor</a></b> : String<div class="mdesc"><div class="short">The color to use when visually highlighting the drag source in the afterRepair \r
-method after a failed drop (defaults ...</div><div class="long">The color to use when visually highlighting the drag source in the afterRepair\r
-method after a failed drop (defaults to "c3daf9" - light blue)</div></div></td><td class="msource">DragZone</td></tr></tbody></table><a id="Ext.dd.DragZone-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.DDProxy-Ext.dd.DDProxy.dragElId"></a><b><a href="source/DDCore.html#prop-Ext.dd.DDProxy-Ext.dd.DDProxy.dragElId">Ext.dd.DDProxy.dragElId</a></b> : String<div class="mdesc">The default drag frame div id</div></td><td class="msource"><a href="output/Ext.dd.DDProxy.html#Ext.dd.DDProxy.dragElId" ext:member="#Ext.dd.DDProxy.dragElId" ext:cls="Ext.dd.DDProxy">DDProxy</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-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\r
-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 expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DDProxy-centerFrame"></a><b><a href="source/DDCore.html#prop-Ext.dd.DDProxy-centerFrame">centerFrame</a></b> : boolean<div class="mdesc"><div class="short">By default the frame is positioned exactly where the drag element is, so\r
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.dd.DragZone-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.dd.DragZone-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.dd.DragZone-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.dd.DragZone-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.dd.DragZone"><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.DD.html" ext:member="" ext:cls="Ext.dd.DD">DD</a>
+ <img src="resources/elbow-end.gif"><a href="output/Ext.dd.DDProxy.html" ext:member="" ext:cls="Ext.dd.DDProxy">DDProxy</a>
+ <img src="resources/elbow-end.gif"><a href="output/Ext.dd.DragSource.html" ext:member="" ext:cls="Ext.dd.DragSource">DragSource</a>
+ <img src="resources/elbow-end.gif">DragZone</pre></div><h1>Class <a href="source/DragZone.html#cls-Ext.dd.DragZone">Ext.dd.DragZone</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/DragZone.html#cls-Ext.dd.DragZone">DragZone.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/DragZone.html#cls-Ext.dd.DragZone">DragZone</a></td></tr><tr><td class="label">Subclasses:</td><td class="hd-info"><a href="output/Ext.grid.GridDragZone.html" ext:cls="Ext.grid.GridDragZone">GridDragZone</a>, <a href="output/Ext.tree.TreeDragZone.html" ext:cls="Ext.tree.TreeDragZone">TreeDragZone</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.dd.DragSource.html" ext:cls="Ext.dd.DragSource" ext:member="">DragSource</a></td></tr></table><div class="description"><p>This class provides a container DD instance that allows dragging of multiple child source nodes.</p>
+<p>This class does not move the drag target nodes, but a proxy element which may contain
+any DOM structure you wish. The DOM element to show in the proxy is provided by either a
+provided implementation of <a href="output/Ext.dd.DragZone.html#Ext.dd.DragZone-getDragData" ext:member="getDragData" ext:cls="Ext.dd.DragZone">getDragData</a>, or by registered draggables registered with <a href="output/Ext.dd.Registry.html" ext:cls="Ext.dd.Registry">Ext.dd.Registry</a></p>
+<p>If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some
+application object (For example nodes in a <a href="output/Ext.DataView.html" ext:cls="Ext.DataView">DataView</a>) then use of this class
+is the most efficient way to "activate" those nodes.</p>
+<p>By default, this class requires that draggable child nodes 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 DragZone to manage any number of draggable elements is to configure
+the DragZone with an implementation of the <a href="output/Ext.dd.DragZone.html#Ext.dd.DragZone-getDragData" ext:member="getDragData" ext:cls="Ext.dd.DragZone">getDragData</a> method 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. For example, to make the nodes of a DataView draggable, use the following
+technique. Knowledge of the use of the DataView is required:</p><pre><code>myDataView.on(<em>'render'</em>, <b>function</b>(v) {
+ myDataView.dragZone = <b>new</b> Ext.dd.DragZone(v.getEl(), {
+
+<i>// On receipt of a mousedown event, see <b>if</b> it is within a DataView node.</i>
+<i>// Return a drag data object <b>if</b> so.</i>
+ getDragData: <b>function</b>(e) {
+
+<i>// Use the DataView<em>'s own itemSelector (a mandatory property) to</i>
+<i>// test <b>if</b> the mousedown is within one of the DataView'</em>s nodes.</i>
+ <b>var</b> sourceEl = e.getTarget(v.itemSelector, 10);
+
+<i>// If the mousedown is within a DataView node, clone the node to produce</i>
+<i>// a ddel element <b>for</b> use by the drag proxy. Also add application data</i>
+<i>// to the returned data object.</i>
+ <b>if</b> (sourceEl) {
+ d = sourceEl.cloneNode(true);
+ d.id = Ext.id();
+ <b>return</b> {
+ ddel: d,
+ sourceEl: sourceEl,
+ repairXY: Ext.fly(sourceEl).getXY(),
+ sourceStore: v.store,
+ draggedRecord: v.<a href="output/Ext.DataView.html#Ext.DataView-getRecord" ext:member="getRecord" ext:cls="Ext.DataView">getRecord</a>(sourceEl)
+ }
+ }
+ },
+
+<i>// Provide coordinates <b>for</b> the proxy to slide back to on failed drag.</i>
+<i>// This is the original XY coordinates of the draggable element captured</i>
+<i>// <b>in</b> the getDragData method.</i>
+ getRepairXY: <b>function</b>() {
+ <b>return</b> this.dragData.repairXY;
+ }
+ });
+});</code></pre>
+See the <a href="output/Ext.dd.DropZone.html" ext:cls="Ext.dd.DropZone">DropZone</a> documentation for details about building a DropZone which
+cooperates with this DragZone.</div><div class="hr"></div><a id="Ext.dd.DragZone-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 "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragZone-containerScroll"></a><b><a href="source/DragZone.html#cfg-Ext.dd.DragZone-containerScroll">containerScroll</a></b> : Boolean<div class="mdesc">True to register this container with the Scrollmanager
+for auto scrolling during drag operations.</div></td><td class="msource">DragZone</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragSource-ddGroup"></a><b><a href="source/DragSource.html#cfg-Ext.dd.DragSource-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.DragSource.html#ddGroup" ext:member="#ddGroup" ext:cls="Ext.dd.DragSource">DragSource</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.DragSource-dropAllowed"></a><b><a href="source/DragSource.html#cfg-Ext.dd.DragSource-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.DragSource.html#dropAllowed" ext:member="#dropAllowed" ext:cls="Ext.dd.DragSource">DragSource</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.DragSource-dropNotAllowed"></a><b><a href="source/DragSource.html#cfg-Ext.dd.DragSource-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.DragSource.html#dropNotAllowed" ext:member="#dropNotAllowed" ext:cls="Ext.dd.DragSource">DragSource</a></td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DragZone-hlColor"></a><b><a href="source/DragZone.html#cfg-Ext.dd.DragZone-hlColor">hlColor</a></b> : String<div class="mdesc"><div class="short">The color to use when visually highlighting the drag source in the afterRepair
+method after a failed drop (defaults t...</div><div class="long">The color to use when visually highlighting the drag source in the afterRepair
+method after a failed drop (defaults to "c3daf9" - light blue)</div></div></td><td class="msource">DragZone</td></tr></tbody></table><a id="Ext.dd.DragZone-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.DDProxy-Ext.dd.DDProxy.dragElId"></a><b><a href="source/DDCore.html#prop-Ext.dd.DDProxy-Ext.dd.DDProxy.dragElId">Ext.dd.DDProxy.dragElId</a></b> : String<div class="mdesc">The default drag frame div id</div></td><td class="msource"><a href="output/Ext.dd.DDProxy.html#Ext.dd.DDProxy.dragElId" ext:member="#Ext.dd.DDProxy.dragElId" ext:cls="Ext.dd.DDProxy">DDProxy</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 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 expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.dd.DDProxy-centerFrame"></a><b><a href="source/DDCore.html#prop-Ext.dd.DDProxy-centerFrame">centerFrame</a></b> : boolean<div class="mdesc"><div class="short">By default the frame is positioned exactly where the drag element is, so
git.ithinksw.org / extjs.git / blobdiff