Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / DragZone.html
index 30f0881..3235aab 100644 (file)
@@ -1,34 +1,37 @@
+<!DOCTYPE html>
 <html>
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
 </head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-<div id="cls-Ext.dd.DragZone"></div>/**
- * @class Ext.dd.DragZone
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-dd-DragZone'>/**
+</span> * @class Ext.dd.DragZone
  * @extends Ext.dd.DragSource
- * <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
+ * &lt;p&gt;This class provides a container DD instance that allows dragging of multiple child source nodes.&lt;/p&gt;
+ * &lt;p&gt;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 {@link #getDragData}, or by registered draggables registered with {@link Ext.dd.Registry}</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 {@link Ext.DataView DataView}) 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 {@link Ext.dd.Registry}.
+ * provided implementation of {@link #getDragData}, or by registered draggables registered with {@link Ext.dd.Registry}&lt;/p&gt;
+ * &lt;p&gt;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 {@link Ext.view.View DataView}) then use of this class
+ * is the most efficient way to &quot;activate&quot; those nodes.&lt;/p&gt;
+ * &lt;p&gt;By default, this class requires that draggable child nodes are registered with {@link Ext.dd.Registry}.
  * 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 {@link #getDragData} 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 {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a
  * {@link Ext.DomQuery} 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>
+ * technique. Knowledge of the use of the DataView is required:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
 myDataView.on('render', function(v) {
     myDataView.dragZone = new Ext.dd.DragZone(v.getEl(), {
 
@@ -51,7 +54,7 @@ myDataView.on('render', function(v) {
                     sourceEl: sourceEl,
                     repairXY: Ext.fly(sourceEl).getXY(),
                     sourceStore: v.store,
-                    draggedRecord: v.{@link Ext.DataView#getRecord getRecord}(sourceEl)
+                    draggedRecord: v.{@link Ext.view.View#getRecord getRecord}(sourceEl)
                 }
             }
         },
@@ -63,51 +66,53 @@ myDataView.on('render', function(v) {
             return this.dragData.repairXY;
         }
     });
-});</code></pre>
+});&lt;/code&gt;&lt;/pre&gt;
  * See the {@link Ext.dd.DropZone DropZone} documentation for details about building a DropZone which
  * cooperates with this DragZone.
- * @constructor
- * @param {Mixed} el The container element
- * @param {Object} config
  */
-Ext.dd.DragZone = function(el, config){
-    Ext.dd.DragZone.superclass.constructor.call(this, el, config);
-    if(this.containerScroll){
-        Ext.dd.ScrollManager.register(this.el);
-    }
-};
+Ext.define('Ext.dd.DragZone', {
+
+    extend: 'Ext.dd.DragSource',
+
+<span id='Ext-dd-DragZone-method-constructor'>    /**
+</span>     * Creates new DragZone.
+     * @param {String/HTMLElement/Ext.Element} el The container element or ID of it.
+     * @param {Object} config
+     */
+    constructor : function(el, config){
+        this.callParent([el, config]);
+        if (this.containerScroll) {
+            Ext.dd.ScrollManager.register(this.el);
+        }
+    },
 
-Ext.extend(Ext.dd.DragZone, Ext.dd.DragSource, {
-    <div id="prop-Ext.dd.DragZone-dragData"></div>/**
-     * This property contains the data representing the dragged object. This data is set up by the implementation
-     * of the {@link #getDragData} method. It must contain a <tt>ddel</tt> property, but can contain
+<span id='Ext-dd-DragZone-property-dragData'>    /**
+</span>     * This property contains the data representing the dragged object. This data is set up by the implementation
+     * of the {@link #getDragData} method. It must contain a &lt;tt&gt;ddel&lt;/tt&gt; property, but can contain
      * any other data according to the application's needs.
      * @type Object
      * @property dragData
      */
-    <div id="cfg-Ext.dd.DragZone-containerScroll"></div>/**
-     * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager
+
+<span id='Ext-dd-DragZone-cfg-containerScroll'>    /**
+</span>     * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager
      * for auto scrolling during drag operations.
      */
-    <div id="cfg-Ext.dd.DragZone-hlColor"></div>/**
-     * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair
-     * method after a failed drop (defaults to "c3daf9" - light blue)
-     */
 
-    <div id="method-Ext.dd.DragZone-getDragData"></div>/**
-     * Called when a mousedown occurs in this container. Looks in {@link Ext.dd.Registry}
+<span id='Ext-dd-DragZone-method-getDragData'>    /**
+</span>     * Called when a mousedown occurs in this container. Looks in {@link Ext.dd.Registry}
      * for a valid target to drag based on the mouse down. Override this method
      * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
-     * object has a "ddel" attribute (with an HTML Element) for other functions to work.
-     * @param {EventObject} e The mouse down event
+     * object has a &quot;ddel&quot; attribute (with an HTML Element) for other functions to work.
+     * @param {Event} e The mouse down event
      * @return {Object} The dragData
      */
     getDragData : function(e){
         return Ext.dd.Registry.getHandleFromEvent(e);
     },
-    
-    <div id="method-Ext.dd.DragZone-onInitDrag"></div>/**
-     * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
+
+<span id='Ext-dd-DragZone-method-onInitDrag'>    /**
+</span>     * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
      * this.dragData.ddel
      * @param {Number} x The x position of the click on the dragged object
      * @param {Number} y The y position of the click on the dragged object
@@ -118,26 +123,35 @@ Ext.extend(Ext.dd.DragZone, Ext.dd.DragSource, {
         this.onStartDrag(x, y);
         return true;
     },
-    
-    <div id="method-Ext.dd.DragZone-afterRepair"></div>/**
-     * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel 
+
+<span id='Ext-dd-DragZone-method-afterRepair'>    /**
+</span>     * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel
      */
     afterRepair : function(){
-        if(Ext.enableFx){
-            Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
+        var me = this;
+        if (Ext.enableFx) {
+            Ext.fly(me.dragData.ddel).highlight(me.repairHighlightColor);
         }
-        this.dragging = false;
+        me.dragging = false;
     },
 
-    <div id="method-Ext.dd.DragZone-getRepairXY"></div>/**
-     * Called before a repair of an invalid drop to get the XY to animate to. By default returns
+<span id='Ext-dd-DragZone-method-getRepairXY'>    /**
+</span>     * Called before a repair of an invalid drop to get the XY to animate to. By default returns
      * the XY of this.dragData.ddel
-     * @param {EventObject} e The mouse up event
-     * @return {Array} The xy location (e.g. [100, 200])
+     * @param {Event} e The mouse up event
+     * @return {Number[]} The xy location (e.g. [100, 200])
      */
     getRepairXY : function(e){
-        return Ext.Element.fly(this.dragData.ddel).getXY();  
+        return Ext.Element.fly(this.dragData.ddel).getXY();
+    },
+
+    destroy : function(){
+        this.callParent();
+        if (this.containerScroll) {
+            Ext.dd.ScrollManager.unregister(this.el);
+        }
     }
-});</pre>    
+});
+</pre>
 </body>
-</html>
\ No newline at end of file
+</html>