docs/source/ToolTip.html

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