docs/source/EventManager.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">/*!
   9  * Ext JS Library 3.0.3
  10  * Copyright(c) 2006-2009 Ext JS, LLC
  11  * licensing@extjs.com
  12  * http://www.extjs.com/license
  13  */
  14 <div id="cls-Ext.EventManager"></div>/**
  15  * @class Ext.EventManager
  16  * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
  17  * several useful events directly.
  18  * See {@link Ext.EventObject} for more details on normalized event objects.
  19  * @singleton
  20  */
  21 Ext.EventManager = function(){
  22     var docReadyEvent,
  23         docReadyProcId,
  24         docReadyState = false,
  25         E = Ext.lib.Event,
  26         D = Ext.lib.Dom,
  27         DOC = document,
  28         WINDOW = window,
  29         IEDEFERED = "ie-deferred-loader",
  30         DOMCONTENTLOADED = "DOMContentLoaded",
  31         elHash = {},
  32         propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
  33
  34     /// There is some jquery work around stuff here that isn't needed in Ext Core.
  35     function addListener(el, ename, fn, wrap, scope){
  36         var id = Ext.id(el),
  37             es = elHash[id] = elHash[id] || {};
  38
  39         (es[ename] = es[ename] || []).push([fn, wrap, scope]);
  40         E.on(el, ename, wrap);
  41
  42         // this is a workaround for jQuery and should somehow be removed from Ext Core in the future
  43         // without breaking ExtJS.
  44         if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
  45             var args = ["DOMMouseScroll", wrap, false];
  46             el.addEventListener.apply(el, args);
  47             E.on(window, 'unload', function(){
  48                 el.removeEventListener.apply(el, args);
  49             });
  50         }
  51         if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
  52             Ext.EventManager.stoppedMouseDownEvent.addListener(wrap);
  53         }
  54     };
  55
  56     function fireDocReady(){
  57         if(!docReadyState){
  58             Ext.isReady = docReadyState = true;
  59             if(docReadyProcId){
  60                 clearInterval(docReadyProcId);
  61             }
  62             if(Ext.isGecko || Ext.isOpera) {
  63                 DOC.removeEventListener(DOMCONTENTLOADED, fireDocReady, false);
  64             }
  65             if(Ext.isIE){
  66                 var defer = DOC.getElementById(IEDEFERED);
  67                 if(defer){
  68                     defer.onreadystatechange = null;
  69                     defer.parentNode.removeChild(defer);
  70                 }
  71             }
  72             if(docReadyEvent){
  73                 docReadyEvent.fire();
  74                 docReadyEvent.clearListeners();
  75             }
  76         }
  77     };
  78
  79     function initDocReady(){
  80         var COMPLETE = "complete";
  81
  82         docReadyEvent = new Ext.util.Event();
  83         if (Ext.isGecko || Ext.isOpera) {
  84             DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false);
  85         } else if (Ext.isIE){
  86             DOC.write("<s"+'cript id=' + IEDEFERED + ' defer="defer" src="/'+'/:"></s'+"cript>");
  87             DOC.getElementById(IEDEFERED).onreadystatechange = function(){
  88                 if(this.readyState == COMPLETE){
  89                     fireDocReady();
  90                 }
  91             };
  92         } else if (Ext.isWebKit){
  93             docReadyProcId = setInterval(function(){
  94                 if(DOC.readyState == COMPLETE) {
  95                     fireDocReady();
  96                  }
  97             }, 10);
  98         }
  99         // no matter what, make sure it fires on load
 100         E.on(WINDOW, "load", fireDocReady);
 101     };
 102
 103     function createTargeted(h, o){
 104         return function(){
 105             var args = Ext.toArray(arguments);
 106             if(o.target == Ext.EventObject.setEvent(args[0]).target){
 107                 h.apply(this, args);
 108             }
 109         };
 110     };
 111
 112     function createBuffered(h, o){
 113         var task = new Ext.util.DelayedTask(h);
 114         return function(e){
 115             // create new event object impl so new events don't wipe out properties
 116             task.delay(o.buffer, h, null, [new Ext.EventObjectImpl(e)]);
 117         };
 118     };
 119
 120     function createSingle(h, el, ename, fn, scope){
 121         return function(e){
 122             Ext.EventManager.removeListener(el, ename, fn, scope);
 123             h(e);
 124         };
 125     };
 126
 127     function createDelayed(h, o){
 128         return function(e){
 129             // create new event object impl so new events don't wipe out properties
 130             e = new Ext.EventObjectImpl(e);
 131             setTimeout(function(){
 132                 h(e);
 133             }, o.delay || 10);
 134         };
 135     };
 136
 137     function listen(element, ename, opt, fn, scope){
 138         var o = !Ext.isObject(opt) ? {} : opt,
 139             el = Ext.getDom(element);
 140
 141         fn = fn || o.fn;
 142         scope = scope || o.scope;
 143
 144         if(!el){
 145             throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
 146         }
 147         function h(e){
 148             // prevent errors while unload occurring
 149             if(!Ext){// !window[xname]){  ==> can't we do this?
 150                 return;
 151             }
 152             e = Ext.EventObject.setEvent(e);
 153             var t;
 154             if (o.delegate) {
 155                 if(!(t = e.getTarget(o.delegate, el))){
 156                     return;
 157                 }
 158             } else {
 159                 t = e.target;
 160             }
 161             if (o.stopEvent) {
 162                 e.stopEvent();
 163             }
 164             if (o.preventDefault) {
 165                e.preventDefault();
 166             }
 167             if (o.stopPropagation) {
 168                 e.stopPropagation();
 169             }
 170             if (o.normalized) {
 171                 e = e.browserEvent;
 172             }
 173
 174             fn.call(scope || el, e, t, o);
 175         };
 176         if(o.target){
 177             h = createTargeted(h, o);
 178         }
 179         if(o.delay){
 180             h = createDelayed(h, o);
 181         }
 182         if(o.single){
 183             h = createSingle(h, el, ename, fn, scope);
 184         }
 185         if(o.buffer){
 186             h = createBuffered(h, o);
 187         }
 188
 189         addListener(el, ename, fn, h, scope);
 190         return h;
 191     };
 192
 193     var pub = {
 194         <div id="method-Ext.EventManager-addListener"></div>/**
 195          * Appends an event handler to an element.  The shorthand version {@link #on} is equivalent.  Typically you will
 196          * use {@link Ext.Element#addListener} directly on an Element in favor of calling this version.
 197          * @param {String/HTMLElement} el The html element or id to assign the event handler to.
 198          * @param {String} eventName The name of the event to listen for.
 199          * @param {Function} handler The handler function the event invokes. This function is passed
 200          * the following parameters:<ul>
 201          * <li>evt : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>
 202          * <li>t : Element<div class="sub-desc">The {@link Ext.Element Element} which was the target of the event.
 203          * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>
 204          * <li>o : Object<div class="sub-desc">The options object from the addListener call.</div></li>
 205          * </ul>
 206          * @param {Object} scope (optional) The scope (<b><code>this</code></b> reference) in which the handler function is executed. <b>Defaults to the Element</b>.
 207          * @param {Object} options (optional) An object containing handler configuration properties.
 208          * This may contain any of the following properties:<ul>
 209          * <li>scope : Object<div class="sub-desc">The scope (<b><code>this</code></b> reference) in which the handler function is executed. <b>Defaults to the Element</b>.</div></li>
 210          * <li>delegate : String<div class="sub-desc">A simple selector to filter the target or look for a descendant of the target</div></li>
 211          * <li>stopEvent : Boolean<div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>
 212          * <li>preventDefault : Boolean<div class="sub-desc">True to prevent the default action</div></li>
 213          * <li>stopPropagation : Boolean<div class="sub-desc">True to prevent event propagation</div></li>
 214          * <li>normalized : Boolean<div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>
 215          * <li>delay : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after te event fires.</div></li>
 216          * <li>single : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
 217          * <li>buffer : Number<div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
 218          * by the specified number of milliseconds. If the event fires again within that time, the original
 219          * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
 220          * <li>target : Element<div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>
 221          * </ul><br>
 222          * <p>See {@link Ext.Element#addListener} for examples of how to use these options.</p>
 223          */
 224         addListener : function(element, eventName, fn, scope, options){
 225             if(Ext.isObject(eventName)){
 226                 var o = eventName, e, val;
 227                 for(e in o){
 228                     val = o[e];
 229                     if(!propRe.test(e)){
 230                         if(Ext.isFunction(val)){
 231                             // shared options
 232                             listen(element, e, o, val, o.scope);
 233                         }else{
 234                             // individual options
 235                             listen(element, e, val);
 236                         }
 237                     }
 238                 }
 239             } else {
 240                 listen(element, eventName, options, fn, scope);
 241             }
 242         },
 243
 244         <div id="method-Ext.EventManager-removeListener"></div>/**
 245          * Removes an event handler from an element.  The shorthand version {@link #un} is equivalent.  Typically
 246          * you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version.
 247          * @param {String/HTMLElement} el The id or html element from which to remove the listener.
 248          * @param {String} eventName The name of the event.
 249          * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
 250          * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
 251          * then this must refer to the same object.
 252          */
 253         removeListener : function(element, eventName, fn, scope){
 254             var el = Ext.getDom(element),
 255                 id = Ext.id(el),
 256                 wrap;
 257
 258             Ext.each((elHash[id] || {})[eventName], function (v,i,a) {
 259                 if (Ext.isArray(v) && v[0] == fn && (!scope || v[2] == scope)) {
 260                     E.un(el, eventName, wrap = v[1]);
 261                     a.splice(i,1);
 262                     return false;
 263                 }
 264             });
 265
 266             // jQuery workaround that should be removed from Ext Core
 267             if(eventName == "mousewheel" && el.addEventListener && wrap){
 268                 el.removeEventListener("DOMMouseScroll", wrap, false);
 269             }
 270
 271             if(eventName == "mousedown" && el == DOC && wrap){ // fix stopped mousedowns on the document
 272                 Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap);
 273             }
 274         },
 275
 276         <div id="method-Ext.EventManager-removeAll"></div>/**
 277          * Removes all event handers from an element.  Typically you will use {@link Ext.Element#removeAllListeners}
 278          * directly on an Element in favor of calling this version.
 279          * @param {String/HTMLElement} el The id or html element from which to remove all event handlers.
 280          */
 281         removeAll : function(el){
 282             var id = Ext.id(el = Ext.getDom(el)),
 283                 es = elHash[id],
 284                 ename;
 285
 286             for(ename in es){
 287                 if(es.hasOwnProperty(ename)){
 288                     Ext.each(es[ename], function(v) {
 289                         E.un(el, ename, v.wrap);
 290                     });
 291                 }
 292             }
 293             elHash[id] = null;
 294         },
 295
 296         <div id="method-Ext.EventManager-onDocumentReady"></div>/**
 297          * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Can be
 298          * accessed shorthanded as Ext.onReady().
 299          * @param {Function} fn The method the event invokes.
 300          * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
 301          * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options
 302          * <code>{single: true}</code> be used so that the handler is removed on first invocation.
 303          */
 304         onDocumentReady : function(fn, scope, options){
 305             if(docReadyState){ // if it already fired
 306                 docReadyEvent.addListener(fn, scope, options);
 307                 docReadyEvent.fire();
 308                 docReadyEvent.clearListeners();
 309             } else {
 310                 if(!docReadyEvent) initDocReady();
 311                 options = options || {};
 312                 options.delay = options.delay || 1;
 313                 docReadyEvent.addListener(fn, scope, options);
 314             }
 315         },
 316
 317         elHash : elHash
 318     };
 319      <div id="method-Ext.EventManager-on"></div>/**
 320      * Appends an event handler to an element.  Shorthand for {@link #addListener}.
 321      * @param {String/HTMLElement} el The html element or id to assign the event handler to
 322      * @param {String} eventName The name of the event to listen for.
 323      * @param {Function} handler The handler function the event invokes.
 324      * @param {Object} scope (optional) (<code>this</code> reference) in which the handler function executes. <b>Defaults to the Element</b>.
 325      * @param {Object} options (optional) An object containing standard {@link #addListener} options
 326      * @member Ext.EventManager
 327      * @method on
 328      */
 329     pub.on = pub.addListener;
 330     <div id="method-Ext.EventManager-un"></div>/**
 331      * Removes an event handler from an element.  Shorthand for {@link #removeListener}.
 332      * @param {String/HTMLElement} el The id or html element from which to remove the listener.
 333      * @param {String} eventName The name of the event.
 334      * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #on} call.</b>
 335      * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
 336      * then this must refer to the same object.
 337      * @member Ext.EventManager
 338      * @method un
 339      */
 340     pub.un = pub.removeListener;
 341
 342     pub.stoppedMouseDownEvent = new Ext.util.Event();
 343     return pub;
 344 }();
 345 <div id="method-Ext-onReady"></div>/**
 346   * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Shorthand of {@link Ext.EventManager#onDocumentReady}.
 347   * @param {Function} fn The method the event invokes.
 348   * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
 349   * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options
 350   * <code>{single: true}</code> be used so that the handler is removed on first invocation.
 351   * @member Ext
 352   * @method onReady
 353  */
 354 Ext.onReady = Ext.EventManager.onDocumentReady;
 355
 356
 357 //Initialize doc classes
 358 (function(){
 359
 360     var initExtCss = function(){
 361         // find the body element
 362         var bd = document.body || document.getElementsByTagName('body')[0];
 363         if(!bd){ return false; }
 364         var cls = [' ',
 365                 Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8'))
 366                 : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')
 367                 : Ext.isOpera ? "ext-opera"
 368                 : Ext.isWebKit ? "ext-webkit" : ""];
 369
 370         if(Ext.isSafari){
 371             cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4')));
 372         }else if(Ext.isChrome){
 373             cls.push("ext-chrome");
 374         }
 375
 376         if(Ext.isMac){
 377             cls.push("ext-mac");
 378         }
 379         if(Ext.isLinux){
 380             cls.push("ext-linux");
 381         }
 382
 383         if(Ext.isStrict || Ext.isBorderBox){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
 384             var p = bd.parentNode;
 385             if(p){
 386                 p.className += Ext.isStrict ? ' ext-strict' : ' ext-border-box';
 387             }
 388         }
 389         bd.className += cls.join(' ');
 390         return true;
 391     }
 392
 393     if(!initExtCss()){
 394         Ext.onReady(initExtCss);
 395     }
 396 })();
 397
 398
 399 <div id="cls-Ext.EventObject"></div>/**
 400  * @class Ext.EventObject
 401  * Just as {@link Ext.Element} wraps around a native DOM node, Ext.EventObject
 402  * wraps the browser's native event-object normalizing cross-browser differences,
 403  * such as which mouse button is clicked, keys pressed, mechanisms to stop
 404  * event-propagation along with a method to prevent default actions from taking place.
 405  * <p>For example:</p>
 406  * <pre><code>
 407 function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
 408     e.preventDefault();
 409     var target = e.getTarget(); // same as t (the target HTMLElement)
 410     ...
 411 }
 412 var myDiv = {@link Ext#get Ext.get}("myDiv");  // get reference to an {@link Ext.Element}
 413 myDiv.on(         // 'on' is shorthand for addListener
 414     "click",      // perform an action on click of myDiv
 415     handleClick   // reference to the action handler
 416 );
 417 // other methods to do the same:
 418 Ext.EventManager.on("myDiv", 'click', handleClick);
 419 Ext.EventManager.addListener("myDiv", 'click', handleClick);
 420  </code></pre>
 421  * @singleton
 422  */
 423 Ext.EventObject = function(){
 424     var E = Ext.lib.Event,
 425         // safari keypress events for special keys return bad keycodes
 426         safariKeys = {
 427             3 : 13, // enter
 428             63234 : 37, // left
 429             63235 : 39, // right
 430             63232 : 38, // up
 431             63233 : 40, // down
 432             63276 : 33, // page up
 433             63277 : 34, // page down
 434             63272 : 46, // delete
 435             63273 : 36, // home
 436             63275 : 35  // end
 437         },
 438         // normalize button clicks
 439         btnMap = Ext.isIE ? {1:0,4:1,2:2} :
 440                 (Ext.isWebKit ? {1:0,2:1,3:2} : {0:0,1:1,2:2});
 441
 442     Ext.EventObjectImpl = function(e){
 443         if(e){
 444             this.setEvent(e.browserEvent || e);
 445         }
 446     };
 447
 448     Ext.EventObjectImpl.prototype = {
 449            /** @private */
 450         setEvent : function(e){
 451             var me = this;
 452             if(e == me || (e && e.browserEvent)){ // already wrapped
 453                 return e;
 454             }
 455             me.browserEvent = e;
 456             if(e){
 457                 // normalize buttons
 458                 me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1);
 459                 if(e.type == 'click' && me.button == -1){
 460                     me.button = 0;
 461                 }
 462                 me.type = e.type;
 463                 me.shiftKey = e.shiftKey;
 464                 // mac metaKey behaves like ctrlKey
 465                 me.ctrlKey = e.ctrlKey || e.metaKey || false;
 466                 me.altKey = e.altKey;
 467                 // in getKey these will be normalized for the mac
 468                 me.keyCode = e.keyCode;
 469                 me.charCode = e.charCode;
 470                 // cache the target for the delayed and or buffered events
 471                 me.target = E.getTarget(e);
 472                 // same for XY
 473                 me.xy = E.getXY(e);
 474             }else{
 475                 me.button = -1;
 476                 me.shiftKey = false;
 477                 me.ctrlKey = false;
 478                 me.altKey = false;
 479                 me.keyCode = 0;
 480                 me.charCode = 0;
 481                 me.target = null;
 482                 me.xy = [0, 0];
 483             }
 484             return me;
 485         },
 486
 487         <div id="method-Ext.EventObject-stopEvent"></div>/**
 488          * Stop the event (preventDefault and stopPropagation)
 489          */
 490         stopEvent : function(){
 491             var me = this;
 492             if(me.browserEvent){
 493                 if(me.browserEvent.type == 'mousedown'){
 494                     Ext.EventManager.stoppedMouseDownEvent.fire(me);
 495                 }
 496                 E.stopEvent(me.browserEvent);
 497             }
 498         },
 499
 500         <div id="method-Ext.EventObject-preventDefault"></div>/**
 501          * Prevents the browsers default handling of the event.
 502          */
 503         preventDefault : function(){
 504             if(this.browserEvent){
 505                 E.preventDefault(this.browserEvent);
 506             }
 507         },
 508
 509         <div id="method-Ext.EventObject-stopPropagation"></div>/**
 510          * Cancels bubbling of the event.
 511          */
 512         stopPropagation : function(){
 513             var me = this;
 514             if(me.browserEvent){
 515                 if(me.browserEvent.type == 'mousedown'){
 516                     Ext.EventManager.stoppedMouseDownEvent.fire(me);
 517                 }
 518                 E.stopPropagation(me.browserEvent);
 519             }
 520         },
 521
 522         <div id="method-Ext.EventObject-getCharCode"></div>/**
 523          * Gets the character code for the event.
 524          * @return {Number}
 525          */
 526         getCharCode : function(){
 527             return this.charCode || this.keyCode;
 528         },
 529
 530         <div id="method-Ext.EventObject-getKey"></div>/**
 531          * Returns a normalized keyCode for the event.
 532          * @return {Number} The key code
 533          */
 534         getKey : function(){
 535             return this.normalizeKey(this.keyCode || this.charCode)
 536         },
 537
 538         // private
 539         normalizeKey: function(k){
 540             return Ext.isSafari ? (safariKeys[k] || k) : k;
 541         },
 542
 543         <div id="method-Ext.EventObject-getPageX"></div>/**
 544          * Gets the x coordinate of the event.
 545          * @return {Number}
 546          */
 547         getPageX : function(){
 548             return this.xy[0];
 549         },
 550
 551         <div id="method-Ext.EventObject-getPageY"></div>/**
 552          * Gets the y coordinate of the event.
 553          * @return {Number}
 554          */
 555         getPageY : function(){
 556             return this.xy[1];
 557         },
 558
 559         <div id="method-Ext.EventObject-getXY"></div>/**
 560          * Gets the page coordinates of the event.
 561          * @return {Array} The xy values like [x, y]
 562          */
 563         getXY : function(){
 564             return this.xy;
 565         },
 566
 567         <div id="method-Ext.EventObject-getTarget"></div>/**
 568          * Gets the target for the event.
 569          * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
 570          * @param {Number/Mixed} maxDepth (optional) The max depth to
 571                 search as a number or element (defaults to 10 || document.body)
 572          * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
 573          * @return {HTMLelement}
 574          */
 575         getTarget : function(selector, maxDepth, returnEl){
 576             return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target);
 577         },
 578
 579         <div id="method-Ext.EventObject-getRelatedTarget"></div>/**
 580          * Gets the related target.
 581          * @return {HTMLElement}
 582          */
 583         getRelatedTarget : function(){
 584             return this.browserEvent ? E.getRelatedTarget(this.browserEvent) : null;
 585         },
 586
 587         <div id="method-Ext.EventObject-getWheelDelta"></div>/**
 588          * Normalizes mouse wheel delta across browsers
 589          * @return {Number} The delta
 590          */
 591         getWheelDelta : function(){
 592             var e = this.browserEvent;
 593             var delta = 0;
 594             if(e.wheelDelta){ /* IE/Opera. */
 595                 delta = e.wheelDelta/120;
 596             }else if(e.detail){ /* Mozilla case. */
 597                 delta = -e.detail/3;
 598             }
 599             return delta;
 600         },
 601
 602         <div id="method-Ext.EventObject-within"></div>/**
 603         * Returns true if the target of this event is a child of el.  Unless the allowEl parameter is set, it will return false if if the target is el.
 604         * Example usage:<pre><code>
 605         // Handle click on any child of an element
 606         Ext.getBody().on('click', function(e){
 607             if(e.within('some-el')){
 608                 alert('Clicked on a child of some-el!');
 609             }
 610         });
 611
 612         // Handle click directly on an element, ignoring clicks on child nodes
 613         Ext.getBody().on('click', function(e,t){
 614             if((t.id == 'some-el') && !e.within(t, true)){
 615                 alert('Clicked directly on some-el!');
 616             }
 617         });
 618         </code></pre>
 619          * @param {Mixed} el The id, DOM element or Ext.Element to check
 620          * @param {Boolean} related (optional) true to test if the related target is within el instead of the target
 621          * @param {Boolean} allowEl {optional} true to also check if the passed element is the target or related target
 622          * @return {Boolean}
 623          */
 624         within : function(el, related, allowEl){
 625             if(el){
 626                 var t = this[related ? "getRelatedTarget" : "getTarget"]();
 627                 return t && ((allowEl ? (t == Ext.getDom(el)) : false) || Ext.fly(el).contains(t));
 628             }
 629             return false;
 630         }
 631      };
 632
 633     return new Ext.EventObjectImpl();
 634 }();</pre>
 635 </body>
 636 </html>