Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / source / ClickRepeater.html
index 97b8d70..bad9e11 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.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
+<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-util.ClickRepeater-method-constructor'><span id='Ext-util.ClickRepeater'>/**
+</span></span> * @class Ext.util.ClickRepeater
+ * @extends Ext.util.Observable
+ *
+ * A wrapper class which can be applied to any element. Fires a &quot;click&quot; event while the
+ * mouse is pressed. The interval between firings may be specified in the config but
+ * defaults to 20 milliseconds.
+ *
+ * Optionally, a CSS class may be applied to the element during the time it is pressed.
+ *
+ * @constructor
+ * @param {Mixed} el The element to listen on
+ * @param {Object} config
  */
-<div id="cls-Ext.util.ClickRepeater"></div>/**
- @class Ext.util.ClickRepeater
- @extends Ext.util.Observable
-
- A wrapper class which can be applied to any element. Fires a "click" event while the
- mouse is pressed. The interval between firings may be specified in the config but
- defaults to 20 milliseconds.
-
- Optionally, a CSS class may be applied to the element during the time it is pressed.
-
- @cfg {Mixed} el The element to act as a button.
- @cfg {Number} delay The initial delay before the repeating event begins firing.
- Similar to an autorepeat key delay.
- @cfg {Number} interval The interval between firings of the "click" event. Default 20 ms.
- @cfg {String} pressClass A CSS class name to be applied to the element while pressed.
- @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
-           "interval" and "delay" are ignored.
- @cfg {Boolean} preventDefault True to prevent the default click event
- @cfg {Boolean} stopDefault True to stop the default click event
-
- @history
-    2007-02-02 jvs Original code contributed by Nige "Animal" White
-    2007-02-02 jvs Renamed to ClickRepeater
-    2007-02-03 jvs Modifications for FF Mac and Safari
-
- @constructor
- @param {Mixed} el The element to listen on
- @param {Object} config
- */
-Ext.util.ClickRepeater = function(el, config)
-{
-    this.el = Ext.get(el);
-    this.el.unselectable();
-
-    Ext.apply(this, config);
-
-    this.addEvents(
-    /**
-     * @event mousedown
-     * Fires when the mouse button is depressed.
-     * @param {Ext.util.ClickRepeater} this
-     */
-        "mousedown",
-    /**
-     * @event click
-     * Fires on a specified interval during the time the element is pressed.
-     * @param {Ext.util.ClickRepeater} this
-     */
-        "click",
-    /**
-     * @event mouseup
-     * Fires when the mouse key is released.
-     * @param {Ext.util.ClickRepeater} this
-     */
-        "mouseup"
-    );
 
-    if(!this.disabled){
-        this.disabled = true;
-        this.enable();
-    }
+Ext.define('Ext.util.ClickRepeater', {
+    extend: 'Ext.util.Observable',
+
+    constructor : function(el, config){
+        this.el = Ext.get(el);
+        this.el.unselectable();
+
+        Ext.apply(this, config);
+
+        this.addEvents(
+<span id='Ext-util.ClickRepeater-event-mousedown'>        /**
+</span>         * @event mousedown
+         * Fires when the mouse button is depressed.
+         * @param {Ext.util.ClickRepeater} this
+         * @param {Ext.EventObject} e
+         */
+        &quot;mousedown&quot;,
+<span id='Ext-util.ClickRepeater-event-click'>        /**
+</span>         * @event click
+         * Fires on a specified interval during the time the element is pressed.
+         * @param {Ext.util.ClickRepeater} this
+         * @param {Ext.EventObject} e
+         */
+        &quot;click&quot;,
+<span id='Ext-util.ClickRepeater-event-mouseup'>        /**
+</span>         * @event mouseup
+         * Fires when the mouse key is released.
+         * @param {Ext.util.ClickRepeater} this
+         * @param {Ext.EventObject} e
+         */
+        &quot;mouseup&quot;
+        );
+
+        if(!this.disabled){
+            this.disabled = true;
+            this.enable();
+        }
 
-    // allow inline handler
-    if(this.handler){
-        this.on("click", this.handler,  this.scope || this);
-    }
+        // allow inline handler
+        if(this.handler){
+            this.on(&quot;click&quot;, this.handler,  this.scope || this);
+        }
+
+        this.callParent();
+    },
+
+<span id='Ext-util.ClickRepeater-cfg-el'>    /**
+</span>     * @cfg {Mixed} el The element to act as a button.
+     */
 
-    Ext.util.ClickRepeater.superclass.constructor.call(this);
-};
+<span id='Ext-util.ClickRepeater-cfg-pressedCls'>    /**
+</span>     * @cfg {String} pressedCls A CSS class name to be applied to the element while pressed.
+     */
+
+<span id='Ext-util.ClickRepeater-cfg-accelerate'>    /**
+</span>     * @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
+     * &quot;interval&quot; and &quot;delay&quot; are ignored.
+     */
 
-Ext.extend(Ext.util.ClickRepeater, Ext.util.Observable, {
+<span id='Ext-util.ClickRepeater-cfg-interval'>    /**
+</span>     * @cfg {Number} interval The interval between firings of the &quot;click&quot; event. Default 20 ms.
+     */
     interval : 20,
+
+<span id='Ext-util.ClickRepeater-cfg-delay'>    /**
+</span>     * @cfg {Number} delay The initial delay before the repeating event begins firing.
+     * Similar to an autorepeat key delay.
+     */
     delay: 250,
+
+<span id='Ext-util.ClickRepeater-cfg-preventDefault'>    /**
+</span>     * @cfg {Boolean} preventDefault True to prevent the default click event
+     */
     preventDefault : true,
+<span id='Ext-util.ClickRepeater-cfg-stopDefault'>    /**
+</span>     * @cfg {Boolean} stopDefault True to stop the default click event
+     */
     stopDefault : false,
+
     timer : 0,
 
-    /**
-     * Enables the repeater and allows events to fire.
+<span id='Ext-util.ClickRepeater-method-enable'>    /**
+</span>     * Enables the repeater and allows events to fire.
      */
     enable: function(){
         if(this.disabled){
@@ -105,14 +110,14 @@ Ext.extend(Ext.util.ClickRepeater, Ext.util.Observable, {
         this.disabled = false;
     },
 
-    /**
-     * Disables the repeater and stops events from firing.
+<span id='Ext-util.ClickRepeater-method-disable'>    /**
+</span>     * Disables the repeater and stops events from firing.
      */
     disable: function(/* private */ force){
         if(force || !this.disabled){
             clearTimeout(this.timer);
-            if(this.pressClass){
-                this.el.removeClass(this.pressClass);
+            if(this.pressedCls){
+                this.el.removeCls(this.pressedCls);
             }
             Ext.getDoc().un('mouseup', this.handleMouseUp, this);
             this.el.removeAllListeners();
@@ -120,8 +125,8 @@ Ext.extend(Ext.util.ClickRepeater, Ext.util.Observable, {
         this.disabled = true;
     },
 
-    /**
-     * Convenience function for setting disabled/enabled by boolean.
+<span id='Ext-util.ClickRepeater-method-setDisabled'>    /**
+</span>     * Convenience function for setting disabled/enabled by boolean.
      * @param {Boolean} disabled
      */
     setDisabled: function(disabled){
@@ -141,48 +146,53 @@ Ext.extend(Ext.util.ClickRepeater, Ext.util.Observable, {
     destroy : function() {
         this.disable(true);
         Ext.destroy(this.el);
-        this.purgeListeners();
+        this.clearListeners();
     },
 
-    handleDblClick : function(){
+    handleDblClick : function(e){
         clearTimeout(this.timer);
         this.el.blur();
 
-        this.fireEvent("mousedown", this);
-        this.fireEvent("click", this);
+        this.fireEvent(&quot;mousedown&quot;, this, e);
+        this.fireEvent(&quot;click&quot;, this, e);
     },
 
     // private
-    handleMouseDown : function(){
+    handleMouseDown : function(e){
         clearTimeout(this.timer);
         this.el.blur();
-        if(this.pressClass){
-            this.el.addClass(this.pressClass);
+        if(this.pressedCls){
+            this.el.addCls(this.pressedCls);
         }
         this.mousedownTime = new Date();
 
-        Ext.getDoc().on("mouseup", this.handleMouseUp, this);
-        this.el.on("mouseout", this.handleMouseOut, this);
+        Ext.getDoc().on(&quot;mouseup&quot;, this.handleMouseUp, this);
+        this.el.on(&quot;mouseout&quot;, this.handleMouseOut, this);
 
-        this.fireEvent("mousedown", this);
-        this.fireEvent("click", this);
+        this.fireEvent(&quot;mousedown&quot;, this, e);
+        this.fireEvent(&quot;click&quot;, this, e);
 
         // Do not honor delay or interval if acceleration wanted.
         if (this.accelerate) {
             this.delay = 400;
         }
-        this.timer = this.click.defer(this.delay || this.interval, this);
+
+        // Re-wrap the event object in a non-shared object, so it doesn't lose its context if
+        // the global shared EventObject gets a new Event put into it before the timer fires.
+        e = new Ext.EventObjectImpl(e);
+
+        this.timer =  Ext.defer(this.click, this.delay || this.interval, this, [e]);
     },
 
     // private
-    click : function(){
-        this.fireEvent("click", this);
-        this.timer = this.click.defer(this.accelerate ?
-            this.easeOutExpo(this.mousedownTime.getElapsed(),
+    click : function(e){
+        this.fireEvent(&quot;click&quot;, this, e);
+        this.timer =  Ext.defer(this.click, this.accelerate ?
+            this.easeOutExpo(Ext.Date.getElapsed(this.mousedownTime),
                 400,
                 -390,
                 12000) :
-            this.interval, this);
+            this.interval, this, [e]);
     },
 
     easeOutExpo : function (t, b, c, d) {
@@ -192,30 +202,31 @@ Ext.extend(Ext.util.ClickRepeater, Ext.util.Observable, {
     // private
     handleMouseOut : function(){
         clearTimeout(this.timer);
-        if(this.pressClass){
-            this.el.removeClass(this.pressClass);
+        if(this.pressedCls){
+            this.el.removeCls(this.pressedCls);
         }
-        this.el.on("mouseover", this.handleMouseReturn, this);
+        this.el.on(&quot;mouseover&quot;, this.handleMouseReturn, this);
     },
 
     // private
     handleMouseReturn : function(){
-        this.el.un("mouseover", this.handleMouseReturn, this);
-        if(this.pressClass){
-            this.el.addClass(this.pressClass);
+        this.el.un(&quot;mouseover&quot;, this.handleMouseReturn, this);
+        if(this.pressedCls){
+            this.el.addCls(this.pressedCls);
         }
         this.click();
     },
 
     // private
-    handleMouseUp : function(){
+    handleMouseUp : function(e){
         clearTimeout(this.timer);
-        this.el.un("mouseover", this.handleMouseReturn, this);
-        this.el.un("mouseout", this.handleMouseOut, this);
-        Ext.getDoc().un("mouseup", this.handleMouseUp, this);
-        this.el.removeClass(this.pressClass);
-        this.fireEvent("mouseup", this);
+        this.el.un(&quot;mouseover&quot;, this.handleMouseReturn, this);
+        this.el.un(&quot;mouseout&quot;, this.handleMouseOut, this);
+        Ext.getDoc().un(&quot;mouseup&quot;, this.handleMouseUp, this);
+        if(this.pressedCls){
+            this.el.removeCls(this.pressedCls);
+        }
+        this.fireEvent(&quot;mouseup&quot;, this, e);
     }
-});</pre>    
-</body>
-</html>
\ No newline at end of file
+});
+</pre></pre></body></html>
\ No newline at end of file