Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / DragDrop.html
index e702fb8..60c02b9 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../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>
  */
 
 
-<span id='Ext-dd-DragDrop-method-constructor'><span id='Ext-dd-DragDrop'>/**
-</span></span> * @class Ext.dd.DragDrop
- * Defines the interface and base operation of items that that can be
+<span id='Ext-dd-DragDrop'>/**
+</span> * Defines the interface and base operation of items that that can be
  * dragged or can be drop targets.  It was designed to be extended, overriding
  * the event handlers for startDrag, onDrag, onDragOver and onDragOut.
  * Up to three html elements can be associated with a DragDrop instance:
- * &lt;ul&gt;
- * &lt;li&gt;linked element: the element that is passed into the constructor.
- * This is the element which defines the boundaries for interaction with
- * other DragDrop objects.&lt;/li&gt;
- * &lt;li&gt;handle element(s): The drag operation only occurs if the element that
- * was clicked matches a handle element.  By default this is the linked
- * element, but there are times that you will want only a portion of the
- * linked element to initiate the drag operation, and the setHandleElId()
- * method provides a way to define this.&lt;/li&gt;
- * &lt;li&gt;drag element: this represents the element that would be moved along
- * with the cursor during a drag operation.  By default, this is the linked
- * element itself as in {@link Ext.dd.DD}.  setDragElId() lets you define
- * a separate element that would be moved, as in {@link Ext.dd.DDProxy}.
- * &lt;/li&gt;
- * &lt;/ul&gt;
+ *
+ * - linked element: the element that is passed into the constructor.
+ *   This is the element which defines the boundaries for interaction with
+ *   other DragDrop objects.
+ *
+ * - handle element(s): The drag operation only occurs if the element that
+ *   was clicked matches a handle element.  By default this is the linked
+ *   element, but there are times that you will want only a portion of the
+ *   linked element to initiate the drag operation, and the setHandleElId()
+ *   method provides a way to define this.
+ *
+ * - drag element: this represents the element that would be moved along
+ *   with the cursor during a drag operation.  By default, this is the linked
+ *   element itself as in {@link Ext.dd.DD}.  setDragElId() lets you define
+ *   a separate element that would be moved, as in {@link Ext.dd.DDProxy}.
+ *
  * This class should not be instantiated until the onload event to ensure that
  * the associated elements are available.
  * The following would define a DragDrop obj that would interact with any
  * other DragDrop obj in the &quot;group1&quot; group:
- * &lt;pre&gt;
- *  dd = new Ext.dd.DragDrop(&quot;div1&quot;, &quot;group1&quot;);
- * &lt;/pre&gt;
+ *
+ *     dd = new Ext.dd.DragDrop(&quot;div1&quot;, &quot;group1&quot;);
+ *
  * Since none of the event handlers have been implemented, nothing would
  * actually happen if you were to run the code above.  Normally you would
  * override this class or one of the default implementations, but you can
  * also override the methods you want on an instance of the class...
- * &lt;pre&gt;
- *  dd.onDragDrop = function(e, id) {
- *  &amp;nbsp;&amp;nbsp;alert(&quot;dd was dropped on &quot; + id);
- *  }
- * &lt;/pre&gt;
- * @constructor
- * @param {String} id of the element that is linked to this instance
- * @param {String} sGroup the group of related DragDrop objects
- * @param {object} config an object containing configurable attributes
- *                Valid properties for DragDrop:
- *                    padding, isTarget, maintainOffset, primaryButtonOnly
+ *
+ *     dd.onDragDrop = function(e, id) {
+ *         alert(&quot;dd was dropped on &quot; + id);
+ *     }
+ *
  */
-
 Ext.define('Ext.dd.DragDrop', {
     requires: ['Ext.dd.DragDropManager'],
+
+<span id='Ext-dd-DragDrop-method-constructor'>    /**
+</span>     * Creates new DragDrop.
+     * @param {String} id of the element that is linked to this instance
+     * @param {String} sGroup the group of related DragDrop objects
+     * @param {Object} config an object containing configurable attributes.
+     * Valid properties for DragDrop:
+     *
+     * - padding
+     * - isTarget
+     * - maintainOffset
+     * - primaryButtonOnly
+     */
     constructor: function(id, sGroup, config) {
         if(id) {
             this.init(id, sGroup, config);
         }
     },
-    
+
 <span id='Ext-dd-DragDrop-property-ignoreSelf'>    /**
 </span>     * Set to false to enable a DragDrop object to fire drag events while dragging
      * over its own Element. Defaults to true - DragDrop objects do not by default
@@ -98,7 +104,7 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-property-config'>    /**
 </span>     * Configuration attributes passed into the constructor
      * @property config
-     * @type object
+     * @type Object
      */
     config: null,
 
@@ -125,7 +131,7 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-property-invalidHandleTypes'>    /**
 </span>     * An object who's property names identify HTML tags to be considered invalid as drag handles.
-     * A non-null property value identifies the tag as invalid. Defaults to the 
+     * A non-null property value identifies the tag as invalid. Defaults to the
      * following value which prevents drag operations from being initiated by &amp;lt;a&gt; elements:&lt;pre&gt;&lt;code&gt;
 {
     A: &quot;A&quot;
@@ -149,8 +155,7 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-property-invalidHandleClasses'>    /**
 </span>     * An Array of CSS class names for elements to be considered in valid as drag handles.
-     * @property invalidHandleClasses
-     * @type Array
+     * @property {String[]} invalidHandleClasses
      */
     invalidHandleClasses: null,
 
@@ -158,7 +163,7 @@ Ext.define('Ext.dd.DragDrop', {
 </span>     * The linked element's absolute X position at the time the drag was
      * started
      * @property startPageX
-     * @type int
+     * @type Number
      * @private
      */
     startPageX: 0,
@@ -167,7 +172,7 @@ Ext.define('Ext.dd.DragDrop', {
 </span>     * The linked element's absolute X position at the time the drag was
      * started
      * @property startPageY
-     * @type int
+     * @type Number
      * @private
      */
     startPageY: 0,
@@ -178,7 +183,7 @@ Ext.define('Ext.dd.DragDrop', {
      * DragDrop object in the same group.  This lets us define multiple
      * groups using a single DragDrop subclass if we want.
      * @property groups
-     * @type object An object in the format {'group1':true, 'group2':true}
+     * @type Object An object in the format {'group1':true, 'group2':true}
      */
     groups: null,
 
@@ -186,14 +191,13 @@ Ext.define('Ext.dd.DragDrop', {
 </span>     * Individual drag/drop instances can be locked.  This will prevent
      * onmousedown start drag.
      * @property locked
-     * @type boolean
+     * @type Boolean
      * @private
      */
     locked: false,
 
 <span id='Ext-dd-DragDrop-method-lock'>    /**
-</span>     * Lock this instance
-     * @method lock
+</span>     * Locks this instance
      */
     lock: function() {
         this.locked = true;
@@ -203,13 +207,12 @@ Ext.define('Ext.dd.DragDrop', {
 </span>     * When set to true, other DD objects in cooperating DDGroups do not receive
      * notification events when this DD object is dragged over them. Defaults to false.
      * @property moveOnly
-     * @type boolean
+     * @type Boolean
      */
     moveOnly: false,
 
 <span id='Ext-dd-DragDrop-method-unlock'>    /**
-</span>     * Unlock this instace
-     * @method unlock
+</span>     * Unlocks this instace
      */
     unlock: function() {
         this.locked = false;
@@ -219,7 +222,7 @@ Ext.define('Ext.dd.DragDrop', {
 </span>     * By default, all instances can be a drop target.  This can be disabled by
      * setting isTarget to false.
      * @property isTarget
-     * @type boolean
+     * @type Boolean
      */
     isTarget: true,
 
@@ -227,7 +230,7 @@ Ext.define('Ext.dd.DragDrop', {
 </span>     * The padding configured for this drag and drop object for calculating
      * the drop zone intersection with this object.
      * An array containing the 4 padding values: [top, right, bottom, left]
-     * @property {[int]} padding
+     * @property {Number[]} padding
      */
     padding: null,
 
@@ -248,7 +251,7 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-property-constrainX'>    /**
 </span>     * Set to true when horizontal contraints are applied
      * @property constrainX
-     * @type boolean
+     * @type Boolean
      * @private
      */
     constrainX: false,
@@ -256,7 +259,7 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-property-constrainY'>    /**
 </span>     * Set to true when vertical contraints are applied
      * @property constrainY
-     * @type boolean
+     * @type Boolean
      * @private
      */
     constrainY: false,
@@ -264,7 +267,7 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-property-minX'>    /**
 </span>     * The left constraint
      * @property minX
-     * @type int
+     * @type Number
      * @private
      */
     minX: 0,
@@ -272,7 +275,7 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-property-maxX'>    /**
 </span>     * The right constraint
      * @property maxX
-     * @type int
+     * @type Number
      * @private
      */
     maxX: 0,
@@ -280,7 +283,7 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-property-minY'>    /**
 </span>     * The up constraint
      * @property minY
-     * @type int
+     * @type Number
      * @private
      */
     minY: 0,
@@ -288,7 +291,7 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-property-maxY'>    /**
 </span>     * The down constraint
      * @property maxY
-     * @type int
+     * @type Number
      * @private
      */
     maxY: 0,
@@ -299,7 +302,7 @@ Ext.define('Ext.dd.DragDrop', {
      * when the page changes
      *
      * @property maintainOffset
-     * @type boolean
+     * @type Boolean
      */
     maintainOffset: false,
 
@@ -307,7 +310,7 @@ Ext.define('Ext.dd.DragDrop', {
 </span>     * Array of pixel locations the element will snap to if we specified a
      * horizontal graduation/interval.  This array is generated automatically
      * when you define a tick interval.
-     * @property {[int]} xTicks
+     * @property {Number[]} xTicks
      */
     xTicks: null,
 
@@ -315,7 +318,7 @@ Ext.define('Ext.dd.DragDrop', {
 </span>     * Array of pixel locations the element will snap to if we specified a
      * vertical graduation/interval.  This array is generated automatically
      * when you define a tick interval.
-     * @property {[int]} yTicks
+     * @property {Number[]} yTicks
      */
     yTicks: null,
 
@@ -325,14 +328,14 @@ Ext.define('Ext.dd.DragDrop', {
      * allow drag and drop to start with any mouse click that is propogated
      * by the browser
      * @property primaryButtonOnly
-     * @type boolean
+     * @type Boolean
      */
     primaryButtonOnly: true,
 
 <span id='Ext-dd-DragDrop-property-available'>    /**
 </span>     * The available property is false until the linked dom element is accessible.
      * @property available
-     * @type boolean
+     * @type Boolean
      */
     available: false,
 
@@ -341,17 +344,15 @@ Ext.define('Ext.dd.DragDrop', {
      * region the linked element is.  This is done in part to work around a
      * bug in some browsers that mis-report the mousedown if the previous
      * mouseup happened outside of the window.  This property is set to true
-     * if outer handles are defined.
+     * if outer handles are defined. Defaults to false.
      *
      * @property hasOuterHandles
-     * @type boolean
-     * @default false
+     * @type Boolean
      */
     hasOuterHandles: false,
 
 <span id='Ext-dd-DragDrop-method-b4StartDrag'>    /**
 </span>     * Code that executes immediately before the startDrag event
-     * @method b4StartDrag
      * @private
      */
     b4StartDrag: function(x, y) { },
@@ -359,15 +360,13 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-method-startDrag'>    /**
 </span>     * Abstract method called after a drag/drop object is clicked
      * and the drag or mousedown time thresholds have beeen met.
-     * @method startDrag
-     * @param {int} X click location
-     * @param {int} Y click location
+     * @param {Number} X click location
+     * @param {Number} Y click location
      */
     startDrag: function(x, y) { /* override this */ },
 
 <span id='Ext-dd-DragDrop-method-b4Drag'>    /**
 </span>     * Code that executes immediately before the onDrag event
-     * @method b4Drag
      * @private
      */
     b4Drag: function(e) { },
@@ -375,7 +374,6 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-method-onDrag'>    /**
 </span>     * Abstract method called during the onMouseMove event while dragging an
      * object.
-     * @method onDrag
      * @param {Event} e the mousemove event
      */
     onDrag: function(e) { /* override this */ },
@@ -383,9 +381,8 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-method-onDragEnter'>    /**
 </span>     * Abstract method called when this element fist begins hovering over
      * another DragDrop obj
-     * @method onDragEnter
      * @param {Event} e the mousemove event
-     * @param {String|DragDrop[]} id In POINT mode, the element
+     * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element
      * id this is hovering over.  In INTERSECT mode, an array of one or more
      * dragdrop items being hovered over.
      */
@@ -393,7 +390,6 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-method-b4DragOver'>    /**
 </span>     * Code that executes immediately before the onDragOver event
-     * @method b4DragOver
      * @private
      */
     b4DragOver: function(e) { },
@@ -401,9 +397,8 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-method-onDragOver'>    /**
 </span>     * Abstract method called when this element is hovering over another
      * DragDrop obj
-     * @method onDragOver
      * @param {Event} e the mousemove event
-     * @param {String|DragDrop[]} id In POINT mode, the element
+     * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element
      * id this is hovering over.  In INTERSECT mode, an array of dd items
      * being hovered over.
      */
@@ -411,16 +406,14 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-method-b4DragOut'>    /**
 </span>     * Code that executes immediately before the onDragOut event
-     * @method b4DragOut
      * @private
      */
     b4DragOut: function(e) { },
 
 <span id='Ext-dd-DragDrop-method-onDragOut'>    /**
 </span>     * Abstract method called when we are no longer hovering over an element
-     * @method onDragOut
      * @param {Event} e the mousemove event
-     * @param {String|DragDrop[]} id In POINT mode, the element
+     * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element
      * id this was hovering over.  In INTERSECT mode, an array of dd items
      * that the mouse is no longer over.
      */
@@ -428,7 +421,6 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-method-b4DragDrop'>    /**
 </span>     * Code that executes immediately before the onDragDrop event
-     * @method b4DragDrop
      * @private
      */
     b4DragDrop: function(e) { },
@@ -436,9 +428,8 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-method-onDragDrop'>    /**
 </span>     * Abstract method called when this item is dropped on another DragDrop
      * obj
-     * @method onDragDrop
      * @param {Event} e the mouseup event
-     * @param {String|DragDrop[]} id In POINT mode, the element
+     * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element
      * id this was dropped on.  In INTERSECT mode, an array of dd items this
      * was dropped on.
      */
@@ -447,43 +438,37 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-method-onInvalidDrop'>    /**
 </span>     * Abstract method called when this item is dropped on an area with no
      * drop target
-     * @method onInvalidDrop
      * @param {Event} e the mouseup event
      */
     onInvalidDrop: function(e) { /* override this */ },
 
 <span id='Ext-dd-DragDrop-method-b4EndDrag'>    /**
 </span>     * Code that executes immediately before the endDrag event
-     * @method b4EndDrag
      * @private
      */
     b4EndDrag: function(e) { },
 
 <span id='Ext-dd-DragDrop-method-endDrag'>    /**
-</span>     * Fired when we are done dragging the object
-     * @method endDrag
+</span>     * Called when we are done dragging the object
      * @param {Event} e the mouseup event
      */
     endDrag: function(e) { /* override this */ },
 
 <span id='Ext-dd-DragDrop-method-b4MouseDown'>    /**
 </span>     * Code executed immediately before the onMouseDown event
-     * @method b4MouseDown
      * @param {Event} e the mousedown event
      * @private
      */
     b4MouseDown: function(e) {  },
 
 <span id='Ext-dd-DragDrop-method-onMouseDown'>    /**
-</span>     * Event handler that fires when a drag/drop obj gets a mousedown
-     * @method onMouseDown
+</span>     * Called when a drag/drop obj gets a mousedown
      * @param {Event} e the mousedown event
      */
     onMouseDown: function(e) { /* override this */ },
 
 <span id='Ext-dd-DragDrop-method-onMouseUp'>    /**
-</span>     * Event handler that fires when a drag/drop obj gets a mouseup
-     * @method onMouseUp
+</span>     * Called when a drag/drop obj gets a mouseup
      * @param {Event} e the mouseup event
      */
     onMouseUp: function(e) { /* override this */ },
@@ -491,14 +476,13 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-method-onAvailable'>    /**
 </span>     * Override the onAvailable method to do what is needed after the initial
      * position was determined.
-     * @method onAvailable
      */
     onAvailable: function () {
     },
 
 <span id='Ext-dd-DragDrop-property-defaultPadding'>    /**
-</span>     * Provides default constraint padding to &quot;constrainTo&quot; elements (defaults to {left: 0, right:0, top:0, bottom:0}).
-     * @type Object
+</span>     * @property {Object} defaultPadding
+     * Provides default constraint padding to &quot;constrainTo&quot; elements.
      */
     defaultPadding: {
         left: 0,
@@ -509,27 +493,27 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-method-constrainTo'>    /**
 </span>     * Initializes the drag drop object's constraints to restrict movement to a certain element.
- *
- * Usage:
- &lt;pre&gt;&lt;code&gt;
- var dd = new Ext.dd.DDProxy(&quot;dragDiv1&quot;, &quot;proxytest&quot;,
-                { dragElId: &quot;existingProxyDiv&quot; });
- dd.startDrag = function(){
-     this.constrainTo(&quot;parent-id&quot;);
- };
- &lt;/code&gt;&lt;/pre&gt;
* Or you can initalize it using the {@link Ext.core.Element} object:
- &lt;pre&gt;&lt;code&gt;
- Ext.get(&quot;dragDiv1&quot;).initDDProxy(&quot;proxytest&quot;, {dragElId: &quot;existingProxyDiv&quot;}, {
-     startDrag : function(){
-         this.constrainTo(&quot;parent-id&quot;);
-     }
- });
- &lt;/code&gt;&lt;/pre&gt;
-     * @param {Mixed} constrainTo The element to constrain to.
    *
    * Usage:
+     *
    *     var dd = new Ext.dd.DDProxy(&quot;dragDiv1&quot;, &quot;proxytest&quot;,
+     *                    { dragElId: &quot;existingProxyDiv&quot; });
    *     dd.startDrag = function(){
+     *         this.constrainTo(&quot;parent-id&quot;);
    *     };
+     *
    * Or you can initalize it using the {@link Ext.Element} object:
+     *
    *     Ext.get(&quot;dragDiv1&quot;).initDDProxy(&quot;proxytest&quot;, {dragElId: &quot;existingProxyDiv&quot;}, {
+     *         startDrag : function(){
+     *             this.constrainTo(&quot;parent-id&quot;);
+     *         }
    *     });
+     *
+     * @param {String/HTMLElement/Ext.Element} constrainTo The element or element ID to constrain to.
      * @param {Object/Number} pad (optional) Pad provides a way to specify &quot;padding&quot; of the constraints,
-     * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
-     * an object containing the sides to pad. For example: {right:10, bottom:10}
+     * and can be either a number for symmetrical padding (4 would be equal to `{left:4, right:4, top:4, bottom:4}`) or
+     * an object containing the sides to pad. For example: `{right:10, bottom:10}`
      * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
      */
     constrainTo : function(constrainTo, pad, inContent){
@@ -540,10 +524,10 @@ Ext.define('Ext.dd.DragDrop', {
         var b = Ext.get(this.getEl()).getBox(),
             ce = Ext.get(constrainTo),
             s = ce.getScroll(),
-            c, 
+            c,
             cd = ce.dom;
         if(cd == document.body){
-            c = { x: s.left, y: s.top, width: Ext.core.Element.getViewWidth(), height: Ext.core.Element.getViewHeight()};
+            c = { x: s.left, y: s.top, width: Ext.Element.getViewWidth(), height: Ext.Element.getViewHeight()};
         }else{
             var xy = ce.getXY();
             c = {x : xy[0], y: xy[1], width: cd.clientWidth, height: cd.clientHeight};
@@ -566,7 +550,6 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-method-getEl'>    /**
 </span>     * Returns a reference to the linked element
-     * @method getEl
      * @return {HTMLElement} the html element
      */
     getEl: function() {
@@ -581,7 +564,6 @@ Ext.define('Ext.dd.DragDrop', {
 </span>     * Returns a reference to the actual element to drag.  By default this is
      * the same as the html element, but it can be assigned to another
      * element. An example of this can be found in Ext.dd.DDProxy
-     * @method getDragEl
      * @return {HTMLElement} the html element
      */
     getDragEl: function() {
@@ -591,10 +573,9 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-method-init'>    /**
 </span>     * Sets up the DragDrop object.  Must be called in the constructor of any
      * Ext.dd.DragDrop subclass
-     * @method init
-     * @param id the id of the linked element
+     * @param {String} id the id of the linked element
      * @param {String} sGroup the group of related items
-     * @param {object} config configuration attributes
+     * @param {Object} config configuration attributes
      */
     init: function(id, sGroup, config) {
         this.initTarget(id, sGroup, config);
@@ -605,13 +586,11 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-method-initTarget'>    /**
 </span>     * Initializes Targeting functionality only... the object does not
      * get a mousedown handler.
-     * @method initTarget
-     * @param id the id of the linked element
+     * @param {String} id the id of the linked element
      * @param {String} sGroup the group of related items
-     * @param {object} config configuration attributes
+     * @param {Object} config configuration attributes
      */
     initTarget: function(id, sGroup, config) {
-
         // configuration attributes
         this.config = config || {};
 
@@ -655,7 +634,6 @@ Ext.define('Ext.dd.DragDrop', {
      * a DDProxy implentation will execute apply config on DDProxy, DD, and
      * DragDrop in order to get all of the parameters that are available in
      * each object.
-     * @method applyConfig
      */
     applyConfig: function() {
 
@@ -670,7 +648,6 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-method-handleOnAvailable'>    /**
 </span>     * Executed when the linked element is available
-     * @method handleOnAvailable
      * @private
      */
     handleOnAvailable: function() {
@@ -679,17 +656,16 @@ Ext.define('Ext.dd.DragDrop', {
         this.onAvailable();
     },
 
-<span id='Ext-dd-DragDrop-method-setPadding'>     /**
+<span id='Ext-dd-DragDrop-method-setPadding'>    /**
 </span>     * Configures the padding for the target zone in px.  Effectively expands
      * (or reduces) the virtual object size for targeting calculations.
      * Supports css-style shorthand; if only one parameter is passed, all sides
      * will have that padding, and if only two are passed, the top and bottom
      * will have the first param, the left and right the second.
-     * @method setPadding
-     * @param {int} iTop    Top pad
-     * @param {int} iRight  Right pad
-     * @param {int} iBot    Bot pad
-     * @param {int} iLeft   Left pad
+     * @param {Number} iTop    Top pad
+     * @param {Number} iRight  Right pad
+     * @param {Number} iBot    Bot pad
+     * @param {Number} iLeft   Left pad
      */
     setPadding: function(iTop, iRight, iBot, iLeft) {
         // this.padding = [iLeft, iRight, iTop, iBot];
@@ -704,9 +680,8 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-method-setInitPosition'>    /**
 </span>     * Stores the initial placement of the linked element.
-     * @method setInitPosition
-     * @param {int} diffX   the X offset, default 0
-     * @param {int} diffY   the Y offset, default 0
+     * @param {Number} diffX   the X offset, default 0
+     * @param {Number} diffY   the Y offset, default 0
      */
     setInitPosition: function(diffX, diffY) {
         var el = this.getEl();
@@ -718,7 +693,7 @@ Ext.define('Ext.dd.DragDrop', {
         var dx = diffX || 0;
         var dy = diffY || 0;
 
-        var p = Ext.core.Element.getXY( el );
+        var p = Ext.Element.getXY( el );
 
         this.initPageX = p[0] - dx;
         this.initPageY = p[1] - dy;
@@ -732,12 +707,11 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-method-setStartPosition'>    /**
 </span>     * Sets the start position of the element.  This is set when the obj
      * is initialized, the reset when a drag is started.
-     * @method setStartPosition
      * @param pos current position (from previous lookup)
      * @private
      */
     setStartPosition: function(pos) {
-        var p = pos || Ext.core.Element.getXY( this.getEl() );
+        var p = pos || Ext.Element.getXY( this.getEl() );
         this.deltaSetXY = null;
 
         this.startPageX = p[0];
@@ -745,11 +719,10 @@ Ext.define('Ext.dd.DragDrop', {
     },
 
 <span id='Ext-dd-DragDrop-method-addToGroup'>    /**
-</span>     * Add this instance to a group of related drag/drop objects.  All
+</span>     * Adds this instance to a group of related drag/drop objects.  All
      * instances belong to at least one group, and can belong to as many
      * groups as needed.
-     * @method addToGroup
-     * @param sGroup {string} the name of the group
+     * @param {String} sGroup the name of the group
      */
     addToGroup: function(sGroup) {
         this.groups[sGroup] = true;
@@ -757,9 +730,8 @@ Ext.define('Ext.dd.DragDrop', {
     },
 
 <span id='Ext-dd-DragDrop-method-removeFromGroup'>    /**
-</span>     * Remove's this instance from the supplied interaction group
-     * @method removeFromGroup
-     * @param {string}  sGroup  The group to drop
+</span>     * Removes this instance from the supplied interaction group
+     * @param {String} sGroup  The group to drop
      */
     removeFromGroup: function(sGroup) {
         if (this.groups[sGroup]) {
@@ -772,8 +744,7 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-method-setDragElId'>    /**
 </span>     * Allows you to specify that an element other than the linked element
      * will be moved with the cursor during a drag
-     * @method setDragElId
-     * @param id {string} the id of the element that will be used to initiate the drag
+     * @param {String} id the id of the element that will be used to initiate the drag
      */
     setDragElId: function(id) {
         this.dragElId = id;
@@ -786,8 +757,7 @@ Ext.define('Ext.dd.DragDrop', {
      * content area would normally start the drag operation.  Use this method
      * to specify that an element inside of the content div is the element
      * that starts the drag operation.
-     * @method setHandleElId
-     * @param id {string} the id of the element that will be used to
+     * @param {String} id the id of the element that will be used to
      * initiate the drag.
      */
     setHandleElId: function(id) {
@@ -801,8 +771,7 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-method-setOuterHandleElId'>    /**
 </span>     * Allows you to set an element outside of the linked element as a drag
      * handle
-     * @method setOuterHandleElId
-     * @param id the id of the element that will be used to initiate the drag
+     * @param {String} id the id of the element that will be used to initiate the drag
      */
     setOuterHandleElId: function(id) {
         if (typeof id !== &quot;string&quot;) {
@@ -815,8 +784,7 @@ Ext.define('Ext.dd.DragDrop', {
     },
 
 <span id='Ext-dd-DragDrop-method-unreg'>    /**
-</span>     * Remove all drag and drop hooks for this element
-     * @method unreg
+</span>     * Removes all drag and drop hooks for this element
      */
     unreg: function() {
         Ext.EventManager.un(this.id, &quot;mousedown&quot;, this.handleMouseDown, this);
@@ -831,8 +799,7 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-method-isLocked'>    /**
 </span>     * Returns true if this instance is locked, or the drag drop mgr is locked
      * (meaning that all drag/drop is disabled on the page.)
-     * @method isLocked
-     * @return {boolean} true if this obj or all drag/drop is locked, else
+     * @return {Boolean} true if this obj or all drag/drop is locked, else
      * false
      */
     isLocked: function() {
@@ -840,8 +807,7 @@ Ext.define('Ext.dd.DragDrop', {
     },
 
 <span id='Ext-dd-DragDrop-method-handleMouseDown'>    /**
-</span>     * Fired when this object is clicked
-     * @method handleMouseDown
+</span>     * Called when this object is clicked
      * @param {Event} e
      * @param {Ext.dd.DragDrop} oDD the clicked dd object (this dd obj)
      * @private
@@ -888,7 +854,7 @@ Ext.define('Ext.dd.DragDrop', {
      * when clicked.  This is designed to facilitate embedding links within a
      * drag handle that do something other than start the drag.
      * @method addInvalidHandleType
-     * @param {string} tagName the type of element to exclude
+     * @param {String} tagName the type of element to exclude
      */
     addInvalidHandleType: function(tagName) {
         var type = tagName.toUpperCase();
@@ -899,7 +865,7 @@ Ext.define('Ext.dd.DragDrop', {
 </span>     * Lets you to specify an element id for a child of a drag handle
      * that should not initiate a drag
      * @method addInvalidHandleId
-     * @param {string} id the element id of the element you wish to ignore
+     * @param {String} id the element id of the element you wish to ignore
      */
     addInvalidHandleId: function(id) {
         if (typeof id !== &quot;string&quot;) {
@@ -910,8 +876,7 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-method-addInvalidHandleClass'>    /**
 </span>     * Lets you specify a css class of elements that will not initiate a drag
-     * @method addInvalidHandleClass
-     * @param {string} cssClass the class of the elements you wish to ignore
+     * @param {String} cssClass the class of the elements you wish to ignore
      */
     addInvalidHandleClass: function(cssClass) {
         this.invalidHandleClasses.push(cssClass);
@@ -919,8 +884,7 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-method-removeInvalidHandleType'>    /**
 </span>     * Unsets an excluded tag name set by addInvalidHandleType
-     * @method removeInvalidHandleType
-     * @param {string} tagName the type of element to unexclude
+     * @param {String} tagName the type of element to unexclude
      */
     removeInvalidHandleType: function(tagName) {
         var type = tagName.toUpperCase();
@@ -930,8 +894,7 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-method-removeInvalidHandleId'>    /**
 </span>     * Unsets an invalid handle id
-     * @method removeInvalidHandleId
-     * @param {string} id the id of the element to re-enable
+     * @param {String} id the id of the element to re-enable
      */
     removeInvalidHandleId: function(id) {
         if (typeof id !== &quot;string&quot;) {
@@ -942,8 +905,7 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-method-removeInvalidHandleClass'>    /**
 </span>     * Unsets an invalid css class
-     * @method removeInvalidHandleClass
-     * @param {string} cssClass the class of the element(s) you wish to
+     * @param {String} cssClass the class of the element(s) you wish to
      * re-enable
      */
     removeInvalidHandleClass: function(cssClass) {
@@ -956,9 +918,8 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-method-isValidHandleChild'>    /**
 </span>     * Checks the tag exclusion list to see if this click should be ignored
-     * @method isValidHandleChild
      * @param {HTMLElement} node the HTMLElement to evaluate
-     * @return {boolean} true if this is a valid tag type, false if not
+     * @return {Boolean} true if this is a valid tag type, false if not
      */
     isValidHandleChild: function(node) {
 
@@ -983,9 +944,8 @@ Ext.define('Ext.dd.DragDrop', {
     },
 
 <span id='Ext-dd-DragDrop-method-setXTicks'>    /**
-</span>     * Create the array of horizontal tick marks if an interval was specified
+</span>     * Creates the array of horizontal tick marks if an interval was specified
      * in setXConstraint().
-     * @method setXTicks
      * @private
      */
     setXTicks: function(iStartX, iTickSize) {
@@ -1012,9 +972,8 @@ Ext.define('Ext.dd.DragDrop', {
     },
 
 <span id='Ext-dd-DragDrop-method-setYTicks'>    /**
-</span>     * Create the array of vertical tick marks if an interval was specified in
+</span>     * Creates the array of vertical tick marks if an interval was specified in
      * setYConstraint().
-     * @method setYTicks
      * @private
      */
     setYTicks: function(iStartY, iTickSize) {
@@ -1044,13 +1003,11 @@ Ext.define('Ext.dd.DragDrop', {
 </span>     * By default, the element can be dragged any place on the screen.  Use
      * this method to limit the horizontal travel of the element.  Pass in
      * 0,0 for the parameters if you want to lock the drag to the y axis.
-     * @method setXConstraint
-     * @param {int} iLeft the number of pixels the element can move to the left
-     * @param {int} iRight the number of pixels the element can move to the
+     * @param {Number} iLeft the number of pixels the element can move to the left
+     * @param {Number} iRight the number of pixels the element can move to the
      * right
-     * @param {int} iTickSize optional parameter for specifying that the
-     * element
-     * should move iTickSize pixels at a time.
+     * @param {Number} iTickSize (optional) parameter for specifying that the
+     * element should move iTickSize pixels at a time.
      */
     setXConstraint: function(iLeft, iRight, iTickSize) {
         this.leftConstraint = iLeft;
@@ -1066,7 +1023,6 @@ Ext.define('Ext.dd.DragDrop', {
 <span id='Ext-dd-DragDrop-method-clearConstraints'>    /**
 </span>     * Clears any constraints applied to this instance.  Also clears ticks
      * since they can't exist independent of a constraint at this time.
-     * @method clearConstraints
      */
     clearConstraints: function() {
         this.constrainX = false;
@@ -1076,7 +1032,6 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-method-clearTicks'>    /**
 </span>     * Clears any tick interval defined for this instance
-     * @method clearTicks
      */
     clearTicks: function() {
         this.xTicks = null;
@@ -1089,10 +1044,9 @@ Ext.define('Ext.dd.DragDrop', {
 </span>     * By default, the element can be dragged any place on the screen.  Set
      * this to limit the vertical travel of the element.  Pass in 0,0 for the
      * parameters if you want to lock the drag to the x axis.
-     * @method setYConstraint
-     * @param {int} iUp the number of pixels the element can move up
-     * @param {int} iDown the number of pixels the element can move down
-     * @param {int} iTickSize optional parameter for specifying that the
+     * @param {Number} iUp the number of pixels the element can move up
+     * @param {Number} iDown the number of pixels the element can move down
+     * @param {Number} iTickSize (optional) parameter for specifying that the
      * element should move iTickSize pixels at a time.
      */
     setYConstraint: function(iUp, iDown, iTickSize) {
@@ -1108,9 +1062,8 @@ Ext.define('Ext.dd.DragDrop', {
     },
 
 <span id='Ext-dd-DragDrop-method-resetConstraints'>    /**
-</span>     * resetConstraints must be called if you manually reposition a dd element.
-     * @method resetConstraints
-     * @param {boolean} maintainOffset
+</span>     * Must be called if you manually reposition a dd element.
+     * @param {Boolean} maintainOffset
      */
     resetConstraints: function() {
         // Maintain offsets if necessary
@@ -1143,10 +1096,9 @@ Ext.define('Ext.dd.DragDrop', {
 </span>     * Normally the drag element is moved pixel by pixel, but we can specify
      * that it move a number of pixels at a time.  This method resolves the
      * location when we have it set up like this.
-     * @method getTick
-     * @param {int} val where we want to place the object
-     * @param {int[]} tickArray sorted array of valid points
-     * @return {int} the closest tick
+     * @param {Number} val where we want to place the object
+     * @param {Number[]} tickArray sorted array of valid points
+     * @return {Number} the closest tick
      * @private
      */
     getTick: function(val, tickArray) {
@@ -1176,13 +1128,13 @@ Ext.define('Ext.dd.DragDrop', {
 
 <span id='Ext-dd-DragDrop-method-toString'>    /**
 </span>     * toString method
-     * @method toString
-     * @return {string} string representation of the dd obj
+     * @return {String} string representation of the dd obj
      */
     toString: function() {
         return (&quot;DragDrop &quot; + this.id);
     }
 
-});</pre>
+});
+</pre>
 </body>
 </html>