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