Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / source / EventManager.html
index 540c2ad..168fac5 100644 (file)
@@ -7,10 +7,10 @@
 </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
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
  */
 <div id="cls-Ext.EventManager"></div>/**
  * @class Ext.EventManager
@@ -19,7 +19,6 @@
  * See {@link Ext.EventObject} for more details on normalized event objects.
  * @singleton
  */
-
 Ext.EventManager = function(){
     var docReadyEvent,
         docReadyProcId,
@@ -42,11 +41,11 @@ Ext.EventManager = function(){
         var id = false,
             i = 0,
             len = specialElCache.length,
-            id = false,
             skip = false,
             o;
-        if(el){
-            if(el.getElementById || el.navigator){
+            
+        if (el) {
+            if (el.getElementById || el.navigator) {
                 // look up the id
                 for(; i < len; ++i){
                     o = specialElCache[i];
@@ -75,7 +74,7 @@ Ext.EventManager = function(){
             }
         }
         return id;
-     };
+     }
 
     /// There is some jquery work around stuff here that isn't needed in Ext Core.
     function addListener(el, ename, fn, task, wrap, scope){
@@ -111,7 +110,7 @@ Ext.EventManager = function(){
         if(el == DOC && ename == "mousedown"){
             Ext.EventManager.stoppedMouseDownEvent.addListener(wrap);
         }
-    };
+    }
 
     function doScrollChk(){
         /* Notes:
@@ -185,7 +184,7 @@ Ext.EventManager = function(){
             docReadyEvent.listeners = [];
         }
 
-    };
+    }
 
     function initDocReady(){
         docReadyEvent || (docReadyEvent = new Ext.util.Event());
@@ -219,7 +218,7 @@ Ext.EventManager = function(){
         }
         // no matter what, make sure it fires on load
         E.on(WINDOW, "load", fireDocReady);
-    };
+    }
 
     function createTargeted(h, o){
         return function(){
@@ -228,21 +227,21 @@ Ext.EventManager = function(){
                 h.apply(this, args);
             }
         };
-    };
+    }
 
     function createBuffered(h, o, task){
         return function(e){
             // create new event object impl so new events don't wipe out properties
             task.delay(o.buffer, h, null, [new Ext.EventObjectImpl(e)]);
         };
-    };
+    }
 
     function createSingle(h, el, ename, fn, scope){
         return function(e){
             Ext.EventManager.removeListener(el, ename, fn, scope);
             h(e);
         };
-    };
+    }
 
     function createDelayed(h, o, fn){
         return function(e){
@@ -253,10 +252,10 @@ Ext.EventManager = function(){
             fn.tasks.push(task);
             task.delay(o.delay || 10, h, null, [new Ext.EventObjectImpl(e)]);
         };
-    };
+    }
 
     function listen(element, ename, opt, fn, scope){
-        var o = !Ext.isObject(opt) ? {} : opt,
+        var o = (!opt || typeof opt == "boolean") ? {} : opt,
             el = Ext.getDom(element), task;
 
         fn = fn || o.fn;
@@ -288,12 +287,12 @@ Ext.EventManager = function(){
             if (o.stopPropagation) {
                 e.stopPropagation();
             }
-            if (o.normalized) {
+            if (o.normalized === false) {
                 e = e.browserEvent;
             }
 
             fn.call(scope || el, e, t, o);
-        };
+        }
         if(o.target){
             h = createTargeted(h, o);
         }
@@ -310,7 +309,7 @@ Ext.EventManager = function(){
 
         addListener(el, ename, fn, task, h, scope);
         return h;
-    };
+    }
 
     var pub = {
         <div id="method-Ext.EventManager-addListener"></div>/**
@@ -344,7 +343,7 @@ Ext.EventManager = function(){
          * <p>See {@link Ext.Element#addListener} for examples of how to use these options.</p>
          */
         addListener : function(element, eventName, fn, scope, options){
-            if(Ext.isObject(eventName)){
+            if(typeof eventName == 'object'){
                 var o = eventName, e, val;
                 for(e in o){
                     val = o[e];
@@ -524,7 +523,7 @@ Ext.EventManager = function(){
                 conn,
                 tid,
                 ajax = Ext.lib.Ajax;
-            (Ext.isObject(ajax.conn)) ? conn = ajax.conn : conn = {};
+            (typeof ajax.conn == 'object') ? conn = ajax.conn : conn = {};
             for (tid in conn) {
                 c = conn[tid];
                 if (c) {
@@ -541,13 +540,13 @@ Ext.EventManager = function(){
          * <code>{single: true}</code> be used so that the handler is removed on first invocation.
          */
         onDocumentReady : function(fn, scope, options){
-            if(Ext.isReady){ // if it already fired or document.body is present
+            if (Ext.isReady) { // if it already fired or document.body is present
                 docReadyEvent || (docReadyEvent = new Ext.util.Event());
                 docReadyEvent.addListener(fn, scope, options);
                 docReadyEvent.fire();
                 docReadyEvent.listeners = [];
-            }else{
-                if(!docReadyEvent){
+            } else {
+                if (!docReadyEvent) {
                     initDocReady();
                 }
                 options = options || {};
@@ -603,42 +602,103 @@ Ext.onReady = Ext.EventManager.onDocumentReady;
 
 //Initialize doc classes
 (function(){
-
-    var initExtCss = function(){
+    var initExtCss = function() {
         // find the body element
         var bd = document.body || document.getElementsByTagName('body')[0];
-        if(!bd){ return false; }
+        if (!bd) {
+            return false;
+        }
+        
         var cls = [' ',
                 Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8'))
                 : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')
                 : Ext.isOpera ? "ext-opera"
                 : Ext.isWebKit ? "ext-webkit" : ""];
 
-        if(Ext.isSafari){
+        if (Ext.isSafari) {
             cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4')));
-        }else if(Ext.isChrome){
+        } else if(Ext.isChrome) {
             cls.push("ext-chrome");
         }
 
-        if(Ext.isMac){
+        if (Ext.isMac) {
             cls.push("ext-mac");
         }
-        if(Ext.isLinux){
+        if (Ext.isLinux) {
             cls.push("ext-linux");
         }
 
-        if(Ext.isStrict || Ext.isBorderBox){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
+        // add to the parent to allow for selectors like ".ext-strict .ext-ie"
+        if (Ext.isStrict || Ext.isBorderBox) {
             var p = bd.parentNode;
-            if(p){
-                p.className += Ext.isStrict ? ' ext-strict' : ' ext-border-box';
+            if (p) {
+                Ext.fly(p, '_internal').addClass(((Ext.isStrict && Ext.isIE ) || (!Ext.enableForcedBoxModel && !Ext.isIE)) ? ' ext-strict' : ' ext-border-box');
             }
         }
-        bd.className += cls.join(' ');
+        // Forced border box model class applied to all elements. Bypassing javascript based box model adjustments
+        // in favor of css.  This is for non-IE browsers.
+        if (Ext.enableForcedBoxModel && !Ext.isIE) {
+            Ext.isForcedBorderBox = true;
+            cls.push("ext-forced-border-box");
+        }
+        
+        Ext.fly(bd, '_internal').addClass(cls);
         return true;
+    };
+    
+    if (!initExtCss()) {
+        Ext.onReady(initExtCss);
     }
+})();
 
-    if(!initExtCss()){
-        Ext.onReady(initExtCss);
+<div id="prop-Ext.EventManager-function"></div>/**
+ * Code used to detect certain browser feature/quirks/bugs at startup.
+ */
+(function(){
+    var supports = Ext.apply(Ext.supports, {
+        <div id="prop-Ext.EventManager-correctRightMargin"></div>/**
+         * In Webkit, there is an issue with getting the margin right property, see
+         * https://bugs.webkit.org/show_bug.cgi?id=13343
+         */
+        correctRightMargin: true,
+        
+        <div id="prop-Ext.EventManager-correctTransparentColor"></div>/**
+         * Webkit browsers return rgba(0, 0, 0) when a transparent color is used
+         */
+        correctTransparentColor: true,
+        
+        <div id="prop-Ext.EventManager-cssFloat"></div>/**
+         * IE uses styleFloat, not cssFloat for the float property.
+         */
+        cssFloat: true
+    });
+    
+    var supportTests = function(){
+            var div = document.createElement('div'),
+                doc = document,
+                view,
+                last;
+                
+            div.innerHTML = '<div style="height:30px;width:50px;"><div style="height:20px;width:20px;"></div></div><div style="float:left;background-color:transparent;">';
+            doc.body.appendChild(div);
+            last = div.lastChild;
+            
+            if((view = doc.defaultView)){
+                if(view.getComputedStyle(div.firstChild.firstChild, null).marginRight != '0px'){
+                    supports.correctRightMargin = false;
+                }
+                if(view.getComputedStyle(last, null).backgroundColor != 'transparent'){
+                    supports.correctTransparentColor = false;
+                }
+            }
+            supports.cssFloat = !!last.style.cssFloat;
+            doc.body.removeChild(div);
+    };
+    
+    if (Ext.isReady) {
+        supportTests();    
+    } else {
+        Ext.onReady(supportTests);
     }
 })();
 
@@ -669,6 +729,7 @@ Ext.EventManager.addListener("myDiv", 'click', handleClick);
  */
 Ext.EventObject = function(){
     var E = Ext.lib.Event,
+        clickRe = /(dbl)?click/,
         // safari keypress events for special keys return bad keycodes
         safariKeys = {
             3 : 13, // enter
@@ -683,8 +744,7 @@ Ext.EventObject = function(){
             63275 : 35  // end
         },
         // normalize button clicks
-        btnMap = Ext.isIE ? {1:0,4:1,2:2} :
-                (Ext.isWebKit ? {1:0,2:1,3:2} : {0:0,1:1,2:2});
+        btnMap = Ext.isIE ? {1:0,4:1,2:2} : {0:0,1:1,2:2};
 
     Ext.EventObjectImpl = function(e){
         if(e){
@@ -703,7 +763,7 @@ Ext.EventObject = function(){
             if(e){
                 // normalize buttons
                 me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1);
-                if(e.type == 'click' && me.button == -1){
+                if(clickRe.test(e.type) && me.button == -1){
                     me.button = 0;
                 }
                 me.type = e.type;
@@ -779,7 +839,7 @@ Ext.EventObject = function(){
          * @return {Number} The key code
          */
         getKey : function(){
-            return this.normalizeKey(this.keyCode || this.charCode)
+            return this.normalizeKey(this.keyCode || this.charCode);
         },
 
         // private