Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / source / DragTracker.html
index 7dfe69d..be2261f 100644 (file)
 <html>
 <head>
+  <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>
 </head>
 <body  onload="prettyPrint();">
     <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
  */
-<div id="cls-Ext.dd.DragTracker"></div>/**\r
- * @class Ext.dd.DragTracker\r
- * @extends Ext.util.Observable\r
- */\r
-Ext.dd.DragTracker = function(config){\r
-    Ext.apply(this, config);\r
-    this.addEvents(\r
-        <div id="event-Ext.dd.DragTracker-mousedown"></div>/**\r
-         * @event mousedown\r
-         * @param {Object} this\r
-         * @param {Object} e event object\r
-         */\r
-        'mousedown',\r
-        <div id="event-Ext.dd.DragTracker-mouseup"></div>/**\r
-         * @event mouseup\r
-         * @param {Object} this\r
-         * @param {Object} e event object\r
-         */\r
-        'mouseup',\r
-        <div id="event-Ext.dd.DragTracker-mousemove"></div>/**\r
-         * @event mousemove\r
-         * @param {Object} this\r
-         * @param {Object} e event object\r
-         */\r
-        'mousemove',\r
-        <div id="event-Ext.dd.DragTracker-dragstart"></div>/**\r
-         * @event dragstart\r
-         * @param {Object} this\r
-         * @param {Object} startXY the page coordinates of the event\r
-         */\r
-        'dragstart',\r
-        <div id="event-Ext.dd.DragTracker-dragend"></div>/**\r
-         * @event dragend\r
-         * @param {Object} this\r
-         * @param {Object} e event object\r
-         */\r
-        'dragend',\r
-        <div id="event-Ext.dd.DragTracker-drag"></div>/**\r
-         * @event drag\r
-         * @param {Object} this\r
-         * @param {Object} e event object\r
-         */\r
-        'drag'\r
-    );\r
-\r
-    this.dragRegion = new Ext.lib.Region(0,0,0,0);\r
-\r
-    if(this.el){\r
-        this.initEl(this.el);\r
-    }\r
-}\r
-\r
-Ext.extend(Ext.dd.DragTracker, Ext.util.Observable,  {\r
-    <div id="cfg-Ext.dd.DragTracker-active"></div>/**\r
-     * @cfg {Boolean} active\r
-        * Defaults to <tt>false</tt>.\r
-        */     \r
-    active: false,\r
-    <div id="cfg-Ext.dd.DragTracker-tolerance"></div>/**\r
-     * @cfg {Number} tolerance\r
-        * Defaults to <tt>5</tt>.\r
-        */     \r
-    tolerance: 5,\r
-    <div id="cfg-Ext.dd.DragTracker-autoStart"></div>/**\r
-     * @cfg {Boolean/Number} autoStart\r
-        * Defaults to <tt>false</tt>. Specify <tt>true</tt> to defer trigger start by 1000 ms.\r
-        * Specify a Number for the number of milliseconds to defer trigger start.\r
-        */     \r
-    autoStart: false,\r
-\r
-    initEl: function(el){\r
-        this.el = Ext.get(el);\r
-        el.on('mousedown', this.onMouseDown, this,\r
-                this.delegate ? {delegate: this.delegate} : undefined);\r
-    },\r
-\r
-    destroy : function(){\r
-        this.el.un('mousedown', this.onMouseDown, this);\r
-    },\r
-\r
-    onMouseDown: function(e, target){\r
-        if(this.fireEvent('mousedown', this, e) !== false && this.onBeforeStart(e) !== false){\r
-            this.startXY = this.lastXY = e.getXY();\r
-            this.dragTarget = this.delegate ? target : this.el.dom;\r
-            if(this.preventDefault !== false){\r
-                e.preventDefault();\r
-            }\r
-            var doc = Ext.getDoc();\r
-            doc.on('mouseup', this.onMouseUp, this);\r
-            doc.on('mousemove', this.onMouseMove, this);\r
-            doc.on('selectstart', this.stopSelect, this);\r
-            if(this.autoStart){\r
-                this.timer = this.triggerStart.defer(this.autoStart === true ? 1000 : this.autoStart, this);\r
-            }\r
-        }\r
-    },\r
-\r
-    onMouseMove: function(e, target){\r
-        // HACK: IE hack to see if button was released outside of window. */\r
-        if(this.active && Ext.isIE && !e.browserEvent.button){\r
-            e.preventDefault();\r
-            this.onMouseUp(e);\r
-            return;\r
-        }\r
-\r
-        e.preventDefault();\r
-        var xy = e.getXY(), s = this.startXY;\r
-        this.lastXY = xy;\r
-        if(!this.active){\r
-            if(Math.abs(s[0]-xy[0]) > this.tolerance || Math.abs(s[1]-xy[1]) > this.tolerance){\r
-                this.triggerStart();\r
-            }else{\r
-                return;\r
-            }\r
-        }\r
-        this.fireEvent('mousemove', this, e);\r
-        this.onDrag(e);\r
-        this.fireEvent('drag', this, e);\r
-    },\r
-\r
-    onMouseUp: function(e){\r
-        var doc = Ext.getDoc();\r
-        doc.un('mousemove', this.onMouseMove, this);\r
-        doc.un('mouseup', this.onMouseUp, this);\r
-        doc.un('selectstart', this.stopSelect, this);\r
-        e.preventDefault();\r
-        this.clearStart();\r
-        var wasActive = this.active;\r
-        this.active = false;\r
-        delete this.elRegion;\r
-        this.fireEvent('mouseup', this, e);\r
-        if(wasActive){\r
-            this.onEnd(e);\r
-            this.fireEvent('dragend', this, e);\r
-        }\r
-    },\r
-\r
-    triggerStart: function(isTimer){\r
-        this.clearStart();\r
-        this.active = true;\r
-        this.onStart(this.startXY);\r
-        this.fireEvent('dragstart', this, this.startXY);\r
-    },\r
-\r
-    clearStart : function(){\r
-        if(this.timer){\r
-            clearTimeout(this.timer);\r
-            delete this.timer;\r
-        }\r
-    },\r
-\r
-    stopSelect : function(e){\r
-        e.stopEvent();\r
-        return false;\r
-    },\r
-\r
-    onBeforeStart : function(e){\r
-\r
-    },\r
-\r
-    onStart : function(xy){\r
-\r
-    },\r
-\r
-    onDrag : function(e){\r
-\r
-    },\r
-\r
-    onEnd : function(e){\r
-\r
-    },\r
-\r
-    getDragTarget : function(){\r
-        return this.dragTarget;\r
-    },\r
-\r
-    getDragCt : function(){\r
-        return this.el;\r
-    },\r
-\r
-    getXY : function(constrain){\r
-        return constrain ?\r
-               this.constrainModes[constrain].call(this, this.lastXY) : this.lastXY;\r
-    },\r
-\r
-    getOffset : function(constrain){\r
-        var xy = this.getXY(constrain);\r
-        var s = this.startXY;\r
-        return [s[0]-xy[0], s[1]-xy[1]];\r
-    },\r
-\r
-    constrainModes: {\r
-        'point' : function(xy){\r
-\r
-            if(!this.elRegion){\r
-                this.elRegion = this.getDragCt().getRegion();\r
-            }\r
-\r
-            var dr = this.dragRegion;\r
-\r
-            dr.left = xy[0];\r
-            dr.top = xy[1];\r
-            dr.right = xy[0];\r
-            dr.bottom = xy[1];\r
-\r
-            dr.constrainTo(this.elRegion);\r
-\r
-            return [dr.left, dr.top];\r
-        }\r
-    }\r
-});</pre>
+<div id="cls-Ext.dd.DragTracker"></div>/**
+ * @class Ext.dd.DragTracker
+ * @extends Ext.util.Observable
+ * A DragTracker listens for drag events on an Element and fires events at the start and end of the drag,
+ * as well as during the drag. This is useful for components such as {@link Ext.slider.MultiSlider}, where there is
+ * an element that can be dragged around to change the Slider's value.
+ * DragTracker provides a series of template methods that should be overridden to provide functionality
+ * in response to detected drag operations. These are onBeforeStart, onStart, onDrag and onEnd.
+ * See {@link Ext.slider.MultiSlider}'s initEvents function for an example implementation.
+ */
+Ext.dd.DragTracker = Ext.extend(Ext.util.Observable,  {    
+    <div id="cfg-Ext.dd.DragTracker-active"></div>/**
+     * @cfg {Boolean} active
+        * Defaults to <tt>false</tt>.
+        */     
+    active: false,
+    <div id="cfg-Ext.dd.DragTracker-tolerance"></div>/**
+     * @cfg {Number} tolerance
+        * Number of pixels the drag target must be moved before dragging is considered to have started. Defaults to <tt>5</tt>.
+        */     
+    tolerance: 5,
+    <div id="cfg-Ext.dd.DragTracker-autoStart"></div>/**
+     * @cfg {Boolean/Number} autoStart
+        * Defaults to <tt>false</tt>. Specify <tt>true</tt> to defer trigger start by 1000 ms.
+        * Specify a Number for the number of milliseconds to defer trigger start.
+        */     
+    autoStart: false,
+    
+    constructor : function(config){
+        Ext.apply(this, config);
+           this.addEvents(
+               <div id="event-Ext.dd.DragTracker-mousedown"></div>/**
+                * @event mousedown
+                * @param {Object} this
+                * @param {Object} e event object
+                */
+               'mousedown',
+               <div id="event-Ext.dd.DragTracker-mouseup"></div>/**
+                * @event mouseup
+                * @param {Object} this
+                * @param {Object} e event object
+                */
+               'mouseup',
+               <div id="event-Ext.dd.DragTracker-mousemove"></div>/**
+                * @event mousemove
+                * @param {Object} this
+                * @param {Object} e event object
+                */
+               'mousemove',
+               <div id="event-Ext.dd.DragTracker-dragstart"></div>/**
+                * @event dragstart
+                * @param {Object} this
+                * @param {Object} e event object
+                */
+               'dragstart',
+               <div id="event-Ext.dd.DragTracker-dragend"></div>/**
+                * @event dragend
+                * @param {Object} this
+                * @param {Object} e event object
+                */
+               'dragend',
+               <div id="event-Ext.dd.DragTracker-drag"></div>/**
+                * @event drag
+                * @param {Object} this
+                * @param {Object} e event object
+                */
+               'drag'
+           );
+       
+           this.dragRegion = new Ext.lib.Region(0,0,0,0);
+       
+           if(this.el){
+               this.initEl(this.el);
+           }
+        Ext.dd.DragTracker.superclass.constructor.call(this, config);
+    },
+
+    initEl: function(el){
+        this.el = Ext.get(el);
+        el.on('mousedown', this.onMouseDown, this,
+                this.delegate ? {delegate: this.delegate} : undefined);
+    },
+
+    destroy : function(){
+        this.el.un('mousedown', this.onMouseDown, this);
+        delete this.el;
+    },
+
+    onMouseDown: function(e, target){
+        if(this.fireEvent('mousedown', this, e) !== false && this.onBeforeStart(e) !== false){
+            this.startXY = this.lastXY = e.getXY();
+            this.dragTarget = this.delegate ? target : this.el.dom;
+            if(this.preventDefault !== false){
+                e.preventDefault();
+            }
+            Ext.getDoc().on({
+                scope: this,
+                mouseup: this.onMouseUp,
+                mousemove: this.onMouseMove,
+                selectstart: this.stopSelect
+            });
+            if(this.autoStart){
+                this.timer = this.triggerStart.defer(this.autoStart === true ? 1000 : this.autoStart, this, [e]);
+            }
+        }
+    },
+
+    onMouseMove: function(e, target){
+        // HACK: IE hack to see if button was released outside of window. */
+        if(this.active && Ext.isIE && !e.browserEvent.button){
+            e.preventDefault();
+            this.onMouseUp(e);
+            return;
+        }
+
+        e.preventDefault();
+        var xy = e.getXY(), s = this.startXY;
+        this.lastXY = xy;
+        if(!this.active){
+            if(Math.abs(s[0]-xy[0]) > this.tolerance || Math.abs(s[1]-xy[1]) > this.tolerance){
+                this.triggerStart(e);
+            }else{
+                return;
+            }
+        }
+        this.fireEvent('mousemove', this, e);
+        this.onDrag(e);
+        this.fireEvent('drag', this, e);
+    },
+
+    onMouseUp: function(e) {
+        var doc = Ext.getDoc(),
+            wasActive = this.active;
+            
+        doc.un('mousemove', this.onMouseMove, this);
+        doc.un('mouseup', this.onMouseUp, this);
+        doc.un('selectstart', this.stopSelect, this);
+        e.preventDefault();
+        this.clearStart();
+        this.active = false;
+        delete this.elRegion;
+        this.fireEvent('mouseup', this, e);
+        if(wasActive){
+            this.onEnd(e);
+            this.fireEvent('dragend', this, e);
+        }
+    },
+
+    triggerStart: function(e) {
+        this.clearStart();
+        this.active = true;
+        this.onStart(e);
+        this.fireEvent('dragstart', this, e);
+    },
+
+    clearStart : function() {
+        if(this.timer){
+            clearTimeout(this.timer);
+            delete this.timer;
+        }
+    },
+
+    stopSelect : function(e) {
+        e.stopEvent();
+        return false;
+    },
+    
+    <div id="method-Ext.dd.DragTracker-onBeforeStart"></div>/**
+     * Template method which should be overridden by each DragTracker instance. Called when the user first clicks and
+     * holds the mouse button down. Return false to disallow the drag
+     * @param {Ext.EventObject} e The event object
+     */
+    onBeforeStart : function(e) {
+
+    },
+
+    <div id="method-Ext.dd.DragTracker-onStart"></div>/**
+     * Template method which should be overridden by each DragTracker instance. Called when a drag operation starts
+     * (e.g. the user has moved the tracked element beyond the specified tolerance)
+     * @param {Ext.EventObject} e The event object
+     */
+    onStart : function(xy) {
+
+    },
+
+    <div id="method-Ext.dd.DragTracker-onDrag"></div>/**
+     * Template method which should be overridden by each DragTracker instance. Called whenever a drag has been detected.
+     * @param {Ext.EventObject} e The event object
+     */
+    onDrag : function(e) {
+
+    },
+
+    <div id="method-Ext.dd.DragTracker-onEnd"></div>/**
+     * Template method which should be overridden by each DragTracker instance. Called when a drag operation has been completed
+     * (e.g. the user clicked and held the mouse down, dragged the element and then released the mouse button)
+     * @param {Ext.EventObject} e The event object
+     */
+    onEnd : function(e) {
+
+    },
+
+    <div id="method-Ext.dd.DragTracker-getDragTarget"></div>/**
+     * Returns the drag target
+     * @return {Ext.Element} The element currently being tracked
+     */
+    getDragTarget : function(){
+        return this.dragTarget;
+    },
+
+    getDragCt : function(){
+        return this.el;
+    },
+
+    getXY : function(constrain){
+        return constrain ?
+               this.constrainModes[constrain].call(this, this.lastXY) : this.lastXY;
+    },
+
+    getOffset : function(constrain){
+        var xy = this.getXY(constrain),
+            s = this.startXY;
+        return [s[0]-xy[0], s[1]-xy[1]];
+    },
+
+    constrainModes: {
+        'point' : function(xy){
+
+            if(!this.elRegion){
+                this.elRegion = this.getDragCt().getRegion();
+            }
+
+            var dr = this.dragRegion;
+
+            dr.left = xy[0];
+            dr.top = xy[1];
+            dr.right = xy[0];
+            dr.bottom = xy[1];
+
+            dr.constrainTo(this.elRegion);
+
+            return [dr.left, dr.top];
+        }
+    }
+});</pre>    
 </body>
 </html>
\ No newline at end of file