docs/source/ToolTip.html

   1 <!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-tip.ToolTip-method-constructor'><span id='Ext-tip.ToolTip'>/**
   2 </span></span> * @class Ext.tip.ToolTip
   3  * @extends Ext.tip.Tip
   4  *
   5  * ToolTip is a {@link Ext.tip.Tip} implementation that handles the common case of displaying a
   6  * tooltip when hovering over a certain element or elements on the page. It allows fine-grained
   7  * control over the tooltip's alignment relative to the target element or mouse, and the timing
   8  * of when it is automatically shown and hidden.
   9  *
  10  * This implementation does **not** have a built-in method of automatically populating the tooltip's
  11  * text based on the target element; you must either configure a fixed {@link #html} value for each
  12  * ToolTip instance, or implement custom logic (e.g. in a {@link #beforeshow} event listener) to
  13  * generate the appropriate tooltip content on the fly. See {@link Ext.tip.QuickTip} for a more
  14  * convenient way of automatically populating and configuring a tooltip based on specific DOM
  15  * attributes of each target element.
  16  *
  17  * ## Basic Example
  18  *
  19  *     var tip = Ext.create('Ext.tip.ToolTip', {
  20  *         target: 'clearButton',
  21  *         html: 'Press this button to clear the form'
  22  *     });
  23  *
  24  * {@img Ext.tip.ToolTip/Ext.tip.ToolTip1.png Basic Ext.tip.ToolTip}
  25  *
  26  * ## Delegation
  27  *
  28  * In addition to attaching a ToolTip to a single element, you can also use delegation to attach
  29  * one ToolTip to many elements under a common parent. This is more efficient than creating many
  30  * ToolTip instances. To do this, point the {@link #target} config to a common ancestor of all the
  31  * elements, and then set the {@link #delegate} config to a CSS selector that will select all the
  32  * appropriate sub-elements.
  33  *
  34  * When using delegation, it is likely that you will want to programmatically change the content
  35  * of the ToolTip based on each delegate element; you can do this by implementing a custom
  36  * listener for the {@link #beforeshow} event. Example:
  37  *
  38  *     var myGrid = Ext.create('Ext.grid.GridPanel', gridConfig);
  39  *     myGrid.on('render', function(grid) {
  40  *         var view = grid.getView();    // Capture the grid's view.
  41  *         grid.tip = Ext.create('Ext.tip.ToolTip', {
  42  *             target: view.el,          // The overall target element.
  43  *             delegate: view.itemSelector, // Each grid row causes its own seperate show and hide.
  44  *             trackMouse: true,         // Moving within the row should not hide the tip.
  45  *             renderTo: Ext.getBody(),  // Render immediately so that tip.body can be referenced prior to the first show.
  46  *             listeners: {              // Change content dynamically depending on which element triggered the show.
  47  *                 beforeshow: function updateTipBody(tip) {
  48  *                     tip.update('Over company &quot;' + view.getRecord(tip.triggerElement).get('company') + '&quot;');
  49  *                 }
  50  *             }
  51  *         });
  52  *     });
  53  *
  54  * {@img Ext.tip.ToolTip/Ext.tip.ToolTip2.png Ext.tip.ToolTip with delegation}
  55  *
  56  * ## Alignment
  57  *
  58  * The following configuration properties allow control over how the ToolTip is aligned relative to
  59  * the target element and/or mouse pointer:
  60  *
  61  *  - {@link #anchor}
  62  *  - {@link #anchorToTarget}
  63  *  - {@link #anchorOffset}
  64  *  - {@link #trackMouse}
  65  *  - {@link #mouseOffset}
  66  *
  67  * ## Showing/Hiding
  68  *
  69  * The following configuration properties allow control over how and when the ToolTip is automatically
  70  * shown and hidden:
  71  *
  72  *  - {@link #autoHide}
  73  *  - {@link #showDelay}
  74  *  - {@link #hideDelay}
  75  *  - {@link #dismissDelay}
  76  *
  77  * @constructor
  78  * Create a new ToolTip instance
  79  * @param {Object} config The configuration options
  80  * @xtype tooltip
  81  * @markdown
  82  * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
  83  */
  84 Ext.define('Ext.tip.ToolTip', {
  85     extend: 'Ext.tip.Tip',
  86     alias: 'widget.tooltip',
  87     alternateClassName: 'Ext.ToolTip',
  88 <span id='Ext-tip.ToolTip-property-triggerElement'>    /**
  89 </span>     * When a ToolTip is configured with the &lt;code&gt;{@link #delegate}&lt;/code&gt;
  90      * option to cause selected child elements of the &lt;code&gt;{@link #target}&lt;/code&gt;
  91      * Element to each trigger a seperate show event, this property is set to
  92      * the DOM element which triggered the show.
  93      * @type DOMElement
  94      * @property triggerElement
  95      */
  96 <span id='Ext-tip.ToolTip-cfg-target'>    /**
  97 </span>     * @cfg {Mixed} target The target HTMLElement, Ext.core.Element or id to monitor
  98      * for mouseover events to trigger showing this ToolTip.
  99      */
 100 <span id='Ext-tip.ToolTip-cfg-autoHide'>    /**
 101 </span>     * @cfg {Boolean} autoHide True to automatically hide the tooltip after the
 102      * mouse exits the target element or after the &lt;code&gt;{@link #dismissDelay}&lt;/code&gt;
 103      * has expired if set (defaults to true).  If &lt;code&gt;{@link #closable} = true&lt;/code&gt;
 104      * a close tool button will be rendered into the tooltip header.
 105      */
 106 <span id='Ext-tip.ToolTip-cfg-showDelay'>    /**
 107 </span>     * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays
 108      * after the mouse enters the target element (defaults to 500)
 109      */
 110     showDelay: 500,
 111 <span id='Ext-tip.ToolTip-cfg-hideDelay'>    /**
 112 </span>     * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the
 113      * target element but before the tooltip actually hides (defaults to 200).
 114      * Set to 0 for the tooltip to hide immediately.
 115      */
 116     hideDelay: 200,
 117 <span id='Ext-tip.ToolTip-cfg-dismissDelay'>    /**
 118 </span>     * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip
 119      * automatically hides (defaults to 5000). To disable automatic hiding, set
 120      * dismissDelay = 0.
 121      */
 122     dismissDelay: 5000,
 123 <span id='Ext-tip.ToolTip-cfg-mouseOffset'>    /**
 124 </span>     * @cfg {Array} mouseOffset An XY offset from the mouse position where the
 125      * tooltip should be shown (defaults to [15,18]).
 126      */
 127 <span id='Ext-tip.ToolTip-cfg-trackMouse'>    /**
 128 </span>     * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it
 129      * moves over the target element (defaults to false).
 130      */
 131     trackMouse: false,
 132 <span id='Ext-tip.ToolTip-cfg-anchor'>    /**
 133 </span>     * @cfg {String} anchor If specified, indicates that the tip should be anchored to a
 134      * particular side of the target element or mouse pointer (&quot;top&quot;, &quot;right&quot;, &quot;bottom&quot;,
 135      * or &quot;left&quot;), with an arrow pointing back at the target or mouse pointer. If
 136      * {@link #constrainPosition} is enabled, this will be used as a preferred value
 137      * only and may be flipped as needed.
 138      */
 139 <span id='Ext-tip.ToolTip-cfg-anchorToTarget'>    /**
 140 </span>     * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target
 141      * element, false to anchor it relative to the mouse coordinates (defaults
 142      * to true).  When &lt;code&gt;anchorToTarget&lt;/code&gt; is true, use
 143      * &lt;code&gt;{@link #defaultAlign}&lt;/code&gt; to control tooltip alignment to the
 144      * target element.  When &lt;code&gt;anchorToTarget&lt;/code&gt; is false, use
 145      * &lt;code&gt;{@link #anchorPosition}&lt;/code&gt; instead to control alignment.
 146      */
 147     anchorToTarget: true,
 148 <span id='Ext-tip.ToolTip-cfg-anchorOffset'>    /**
 149 </span>     * @cfg {Number} anchorOffset A numeric pixel value used to offset the
 150      * default position of the anchor arrow (defaults to 0).  When the anchor
 151      * position is on the top or bottom of the tooltip, &lt;code&gt;anchorOffset&lt;/code&gt;
 152      * will be used as a horizontal offset.  Likewise, when the anchor position
 153      * is on the left or right side, &lt;code&gt;anchorOffset&lt;/code&gt; will be used as
 154      * a vertical offset.
 155      */
 156     anchorOffset: 0,
 157 <span id='Ext-tip.ToolTip-cfg-delegate'>    /**
 158 </span>     * @cfg {String} delegate &lt;p&gt;Optional. A {@link Ext.DomQuery DomQuery}
 159      * selector which allows selection of individual elements within the
 160      * &lt;code&gt;{@link #target}&lt;/code&gt; element to trigger showing and hiding the
 161      * ToolTip as the mouse moves within the target.&lt;/p&gt;
 162      * &lt;p&gt;When specified, the child element of the target which caused a show
 163      * event is placed into the &lt;code&gt;{@link #triggerElement}&lt;/code&gt; property
 164      * before the ToolTip is shown.&lt;/p&gt;
 165      * &lt;p&gt;This may be useful when a Component has regular, repeating elements
 166      * in it, each of which need a ToolTip which contains information specific
 167      * to that element. For example:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
 168 var myGrid = Ext.create('Ext.grid.GridPanel', gridConfig);
 169 myGrid.on('render', function(grid) {
 170     var view = grid.getView();    // Capture the grid's view.
 171     grid.tip = Ext.create('Ext.tip.ToolTip', {
 172         target: view.el,          // The overall target element.
 173         delegate: view.itemSelector, // Each grid row causes its own seperate show and hide.
 174         trackMouse: true,         // Moving within the row should not hide the tip.
 175         renderTo: Ext.getBody(),  // Render immediately so that tip.body can be referenced prior to the first show.
 176         listeners: {              // Change content dynamically depending on which element triggered the show.
 177             beforeshow: function(tip) {
 178                 tip.update('Over Record ID ' + view.getRecord(tip.triggerElement).id);
 179             }
 180         }
 181     });
 182 });
 183      *&lt;/code&gt;&lt;/pre&gt;
 184      */
 185
 186     // private
 187     targetCounter: 0,
 188     quickShowInterval: 250,
 189
 190     // private
 191     initComponent: function() {
 192         var me = this;
 193         me.callParent(arguments);
 194         me.lastActive = new Date();
 195         me.setTarget(me.target);
 196         me.origAnchor = me.anchor;
 197     },
 198
 199     // private
 200     onRender: function(ct, position) {
 201         var me = this;
 202         me.callParent(arguments);
 203         me.anchorCls = Ext.baseCSSPrefix + 'tip-anchor-' + me.getAnchorPosition();
 204         me.anchorEl = me.el.createChild({
 205             cls: Ext.baseCSSPrefix + 'tip-anchor ' + me.anchorCls
 206         });
 207     },
 208
 209     // private
 210     afterRender: function() {
 211         var me = this,
 212             zIndex;
 213
 214         me.callParent(arguments);
 215         zIndex = parseInt(me.el.getZIndex(), 10) || 0;
 216         me.anchorEl.setStyle('z-index', zIndex + 1).setVisibilityMode(Ext.core.Element.DISPLAY);
 217     },
 218
 219 <span id='Ext-tip.ToolTip-method-setTarget'>    /**
 220 </span>     * Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.
 221      * @param {Mixed} t The Element, HtmlElement, or ID of an element to bind to
 222      */
 223     setTarget: function(target) {
 224         var me = this,
 225             t = Ext.get(target),
 226             tg;
 227
 228         if (me.target) {
 229             tg = Ext.get(me.target);
 230             me.mun(tg, 'mouseover', me.onTargetOver, me);
 231             me.mun(tg, 'mouseout', me.onTargetOut, me);
 232             me.mun(tg, 'mousemove', me.onMouseMove, me);
 233         }
 234
 235         me.target = t;
 236         if (t) {
 237
 238             me.mon(t, {
 239                 // TODO - investigate why IE6/7 seem to fire recursive resize in e.getXY
 240                 // breaking QuickTip#onTargetOver (EXTJSIV-1608)
 241                 freezeEvent: true,
 242
 243                 mouseover: me.onTargetOver,
 244                 mouseout: me.onTargetOut,
 245                 mousemove: me.onMouseMove,
 246                 scope: me
 247             });
 248         }
 249         if (me.anchor) {
 250             me.anchorTarget = me.target;
 251         }
 252     },
 253
 254     // private
 255     onMouseMove: function(e) {
 256         var me = this,
 257             t = me.delegate ? e.getTarget(me.delegate) : me.triggerElement = true,
 258             xy;
 259         if (t) {
 260             me.targetXY = e.getXY();
 261             if (t === me.triggerElement) {
 262                 if (!me.hidden &amp;&amp; me.trackMouse) {
 263                     xy = me.getTargetXY();
 264                     if (me.constrainPosition) {
 265                         xy = me.el.adjustForConstraints(xy, me.el.dom.parentNode);
 266                     }
 267                     me.setPagePosition(xy);
 268                 }
 269             } else {
 270                 me.hide();
 271                 me.lastActive = new Date(0);
 272                 me.onTargetOver(e);
 273             }
 274         } else if ((!me.closable &amp;&amp; me.isVisible()) &amp;&amp; me.autoHide !== false) {
 275             me.hide();
 276         }
 277     },
 278
 279     // private
 280     getTargetXY: function() {
 281         var me = this,
 282             mouseOffset;
 283         if (me.delegate) {
 284             me.anchorTarget = me.triggerElement;
 285         }
 286         if (me.anchor) {
 287             me.targetCounter++;
 288                 var offsets = me.getOffsets(),
 289                     xy = (me.anchorToTarget &amp;&amp; !me.trackMouse) ? me.el.getAlignToXY(me.anchorTarget, me.getAnchorAlign()) : me.targetXY,
 290                     dw = Ext.core.Element.getViewWidth() - 5,
 291                     dh = Ext.core.Element.getViewHeight() - 5,
 292                     de = document.documentElement,
 293                     bd = document.body,
 294                     scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5,
 295                     scrollY = (de.scrollTop || bd.scrollTop || 0) + 5,
 296                     axy = [xy[0] + offsets[0], xy[1] + offsets[1]],
 297                     sz = me.getSize(),
 298                     constrainPosition = me.constrainPosition;
 299
 300             me.anchorEl.removeCls(me.anchorCls);
 301
 302             if (me.targetCounter &lt; 2 &amp;&amp; constrainPosition) {
 303                 if (axy[0] &lt; scrollX) {
 304                     if (me.anchorToTarget) {
 305                         me.defaultAlign = 'l-r';
 306                         if (me.mouseOffset) {
 307                             me.mouseOffset[0] *= -1;
 308                         }
 309                     }
 310                     me.anchor = 'left';
 311                     return me.getTargetXY();
 312                 }
 313                 if (axy[0] + sz.width &gt; dw) {
 314                     if (me.anchorToTarget) {
 315                         me.defaultAlign = 'r-l';
 316                         if (me.mouseOffset) {
 317                             me.mouseOffset[0] *= -1;
 318                         }
 319                     }
 320                     me.anchor = 'right';
 321                     return me.getTargetXY();
 322                 }
 323                 if (axy[1] &lt; scrollY) {
 324                     if (me.anchorToTarget) {
 325                         me.defaultAlign = 't-b';
 326                         if (me.mouseOffset) {
 327                             me.mouseOffset[1] *= -1;
 328                         }
 329                     }
 330                     me.anchor = 'top';
 331                     return me.getTargetXY();
 332                 }
 333                 if (axy[1] + sz.height &gt; dh) {
 334                     if (me.anchorToTarget) {
 335                         me.defaultAlign = 'b-t';
 336                         if (me.mouseOffset) {
 337                             me.mouseOffset[1] *= -1;
 338                         }
 339                     }
 340                     me.anchor = 'bottom';
 341                     return me.getTargetXY();
 342                 }
 343             }
 344
 345             me.anchorCls = Ext.baseCSSPrefix + 'tip-anchor-' + me.getAnchorPosition();
 346             me.anchorEl.addCls(me.anchorCls);
 347             me.targetCounter = 0;
 348             return axy;
 349         } else {
 350             mouseOffset = me.getMouseOffset();
 351             return (me.targetXY) ? [me.targetXY[0] + mouseOffset[0], me.targetXY[1] + mouseOffset[1]] : mouseOffset;
 352         }
 353     },
 354
 355     getMouseOffset: function() {
 356         var me = this,
 357         offset = me.anchor ? [0, 0] : [15, 18];
 358         if (me.mouseOffset) {
 359             offset[0] += me.mouseOffset[0];
 360             offset[1] += me.mouseOffset[1];
 361         }
 362         return offset;
 363     },
 364
 365     // private
 366     getAnchorPosition: function() {
 367         var me = this,
 368             m;
 369         if (me.anchor) {
 370             me.tipAnchor = me.anchor.charAt(0);
 371         } else {
 372             m = me.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/);
 373             //&lt;debug&gt;
 374             if (!m) {
 375                 Ext.Error.raise('The AnchorTip.defaultAlign value &quot;' + me.defaultAlign + '&quot; is invalid.');
 376             }
 377             //&lt;/debug&gt;
 378             me.tipAnchor = m[1].charAt(0);
 379         }
 380
 381         switch (me.tipAnchor) {
 382         case 't':
 383             return 'top';
 384         case 'b':
 385             return 'bottom';
 386         case 'r':
 387             return 'right';
 388         }
 389         return 'left';
 390     },
 391
 392     // private
 393     getAnchorAlign: function() {
 394         switch (this.anchor) {
 395         case 'top':
 396             return 'tl-bl';
 397         case 'left':
 398             return 'tl-tr';
 399         case 'right':
 400             return 'tr-tl';
 401         default:
 402             return 'bl-tl';
 403         }
 404     },
 405
 406     // private
 407     getOffsets: function() {
 408         var me = this,
 409             mouseOffset,
 410             offsets,
 411             ap = me.getAnchorPosition().charAt(0);
 412         if (me.anchorToTarget &amp;&amp; !me.trackMouse) {
 413             switch (ap) {
 414             case 't':
 415                 offsets = [0, 9];
 416                 break;
 417             case 'b':
 418                 offsets = [0, -13];
 419                 break;
 420             case 'r':
 421                 offsets = [ - 13, 0];
 422                 break;
 423             default:
 424                 offsets = [9, 0];
 425                 break;
 426             }
 427         } else {
 428             switch (ap) {
 429             case 't':
 430                 offsets = [ - 15 - me.anchorOffset, 30];
 431                 break;
 432             case 'b':
 433                 offsets = [ - 19 - me.anchorOffset, -13 - me.el.dom.offsetHeight];
 434                 break;
 435             case 'r':
 436                 offsets = [ - 15 - me.el.dom.offsetWidth, -13 - me.anchorOffset];
 437                 break;
 438             default:
 439                 offsets = [25, -13 - me.anchorOffset];
 440                 break;
 441             }
 442         }
 443         mouseOffset = me.getMouseOffset();
 444         offsets[0] += mouseOffset[0];
 445         offsets[1] += mouseOffset[1];
 446
 447         return offsets;
 448     },
 449
 450     // private
 451     onTargetOver: function(e) {
 452         var me = this,
 453             t;
 454
 455         if (me.disabled || e.within(me.target.dom, true)) {
 456             return;
 457         }
 458         t = e.getTarget(me.delegate);
 459         if (t) {
 460             me.triggerElement = t;
 461             me.clearTimer('hide');
 462             me.targetXY = e.getXY();
 463             me.delayShow();
 464         }
 465     },
 466
 467     // private
 468     delayShow: function() {
 469         var me = this;
 470         if (me.hidden &amp;&amp; !me.showTimer) {
 471             if (Ext.Date.getElapsed(me.lastActive) &lt; me.quickShowInterval) {
 472                 me.show();
 473             } else {
 474                 me.showTimer = Ext.defer(me.show, me.showDelay, me);
 475             }
 476         }
 477         else if (!me.hidden &amp;&amp; me.autoHide !== false) {
 478             me.show();
 479         }
 480     },
 481
 482     // private
 483     onTargetOut: function(e) {
 484         var me = this;
 485         if (me.disabled || e.within(me.target.dom, true)) {
 486             return;
 487         }
 488         me.clearTimer('show');
 489         if (me.autoHide !== false) {
 490             me.delayHide();
 491         }
 492     },
 493
 494     // private
 495     delayHide: function() {
 496         var me = this;
 497         if (!me.hidden &amp;&amp; !me.hideTimer) {
 498             me.hideTimer = Ext.defer(me.hide, me.hideDelay, me);
 499         }
 500     },
 501
 502 <span id='Ext-tip.ToolTip-method-hide'>    /**
 503 </span>     * Hides this tooltip if visible.
 504      */
 505     hide: function() {
 506         var me = this;
 507         me.clearTimer('dismiss');
 508         me.lastActive = new Date();
 509         if (me.anchorEl) {
 510             me.anchorEl.hide();
 511         }
 512         me.callParent(arguments);
 513         delete me.triggerElement;
 514     },
 515
 516 <span id='Ext-tip.ToolTip-method-show'>    /**
 517 </span>     * Shows this tooltip at the current event target XY position.
 518      */
 519     show: function() {
 520         var me = this;
 521
 522         // Show this Component first, so that sizing can be calculated
 523         // pre-show it off screen so that the el will have dimensions
 524         this.callParent();
 525         if (this.hidden === false) {
 526             me.setPagePosition(-10000, -10000);
 527
 528             if (me.anchor) {
 529                 me.anchor = me.origAnchor;
 530             }
 531             me.showAt(me.getTargetXY());
 532
 533             if (me.anchor) {
 534                 me.syncAnchor();
 535                 me.anchorEl.show();
 536             } else {
 537                 me.anchorEl.hide();
 538             }
 539         }
 540     },
 541
 542     // inherit docs
 543     showAt: function(xy) {
 544         var me = this;
 545         me.lastActive = new Date();
 546         me.clearTimers();
 547
 548         // Only call if this is hidden. May have been called from show above.
 549         if (!me.isVisible()) {
 550             this.callParent(arguments);
 551         }
 552
 553         // Show may have been vetoed.
 554         if (me.isVisible()) {
 555             me.setPagePosition(xy[0], xy[1]);
 556             if (me.constrainPosition || me.constrain) {
 557                 me.doConstrain();
 558             }
 559             me.toFront(true);
 560         }
 561
 562         if (me.dismissDelay &amp;&amp; me.autoHide !== false) {
 563             me.dismissTimer = Ext.defer(me.hide, me.dismissDelay, me);
 564         }
 565         if (me.anchor) {
 566             me.syncAnchor();
 567             if (!me.anchorEl.isVisible()) {
 568                 me.anchorEl.show();
 569             }
 570         } else {
 571             me.anchorEl.hide();
 572         }
 573     },
 574
 575     // private
 576     syncAnchor: function() {
 577         var me = this,
 578             anchorPos,
 579             targetPos,
 580             offset;
 581         switch (me.tipAnchor.charAt(0)) {
 582         case 't':
 583             anchorPos = 'b';
 584             targetPos = 'tl';
 585             offset = [20 + me.anchorOffset, 1];
 586             break;
 587         case 'r':
 588             anchorPos = 'l';
 589             targetPos = 'tr';
 590             offset = [ - 1, 12 + me.anchorOffset];
 591             break;
 592         case 'b':
 593             anchorPos = 't';
 594             targetPos = 'bl';
 595             offset = [20 + me.anchorOffset, -1];
 596             break;
 597         default:
 598             anchorPos = 'r';
 599             targetPos = 'tl';
 600             offset = [1, 12 + me.anchorOffset];
 601             break;
 602         }
 603         me.anchorEl.alignTo(me.el, anchorPos + '-' + targetPos, offset);
 604     },
 605
 606     // private
 607     setPagePosition: function(x, y) {
 608         var me = this;
 609         me.callParent(arguments);
 610         if (me.anchor) {
 611             me.syncAnchor();
 612         }
 613     },
 614
 615     // private
 616     clearTimer: function(name) {
 617         name = name + 'Timer';
 618         clearTimeout(this[name]);
 619         delete this[name];
 620     },
 621
 622     // private
 623     clearTimers: function() {
 624         var me = this;
 625         me.clearTimer('show');
 626         me.clearTimer('dismiss');
 627         me.clearTimer('hide');
 628     },
 629
 630     // private
 631     onShow: function() {
 632         var me = this;
 633         me.callParent();
 634         me.mon(Ext.getDoc(), 'mousedown', me.onDocMouseDown, me);
 635     },
 636
 637     // private
 638     onHide: function() {
 639         var me = this;
 640         me.callParent();
 641         me.mun(Ext.getDoc(), 'mousedown', me.onDocMouseDown, me);
 642     },
 643
 644     // private
 645     onDocMouseDown: function(e) {
 646         var me = this;
 647         if (me.autoHide !== true &amp;&amp; !me.closable &amp;&amp; !e.within(me.el.dom)) {
 648             me.disable();
 649             Ext.defer(me.doEnable, 100, me);
 650         }
 651     },
 652
 653     // private
 654     doEnable: function() {
 655         if (!this.isDestroyed) {
 656             this.enable();
 657         }
 658     },
 659
 660     // private
 661     onDisable: function() {
 662         this.callParent();
 663         this.clearTimers();
 664         this.hide();
 665     },
 666
 667     beforeDestroy: function() {
 668         var me = this;
 669         me.clearTimers();
 670         Ext.destroy(me.anchorEl);
 671         delete me.anchorEl;
 672         delete me.target;
 673         delete me.anchorTarget;
 674         delete me.triggerElement;
 675         me.callParent();
 676     },
 677
 678     // private
 679     onDestroy: function() {
 680         Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
 681         this.callParent();
 682     }
 683 });
 684 </pre></pre></body></html>