docs/source/QuickTip.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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/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-QuickTip'>/**
  19 </span> * @class Ext.tip.QuickTip
  20  * @extends Ext.tip.ToolTip
  21  * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global
  22  * {@link Ext.tip.QuickTipManager} instance.  See the QuickTipManager documentation for additional usage details and examples.
  23  * @xtype quicktip
  24  */
  25 Ext.define('Ext.tip.QuickTip', {
  26     extend: 'Ext.tip.ToolTip',
  27     alternateClassName: 'Ext.QuickTip',
  28 <span id='Ext-tip-QuickTip-cfg-target'>    /**
  29 </span>     * @cfg {String/HTMLElement/Ext.Element} target The target HTMLElement, Ext.Element or id to associate with this Quicktip (defaults to the document).
  30      */
  31 <span id='Ext-tip-QuickTip-cfg-interceptTitles'>    /**
  32 </span>     * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available.
  33      */
  34     interceptTitles : false,
  35
  36     // Force creation of header Component
  37     title: '&amp;#160;',
  38
  39     // private
  40     tagConfig : {
  41         namespace : &quot;data-&quot;,
  42         attribute : &quot;qtip&quot;,
  43         width : &quot;qwidth&quot;,
  44         target : &quot;target&quot;,
  45         title : &quot;qtitle&quot;,
  46         hide : &quot;hide&quot;,
  47         cls : &quot;qclass&quot;,
  48         align : &quot;qalign&quot;,
  49         anchor : &quot;anchor&quot;
  50     },
  51
  52     // private
  53     initComponent : function(){
  54         var me = this;
  55
  56         me.target = me.target || Ext.getDoc();
  57         me.targets = me.targets || {};
  58         me.callParent();
  59     },
  60
  61 <span id='Ext-tip-QuickTip-method-register'>    /**
  62 </span>     * Configures a new quick tip instance and assigns it to a target element.  The following config values are
  63      * supported (for example usage, see the {@link Ext.tip.QuickTipManager} class header):
  64      * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
  65      * &lt;li&gt;autoHide&lt;/li&gt;
  66      * &lt;li&gt;cls&lt;/li&gt;
  67      * &lt;li&gt;dismissDelay (overrides the singleton value)&lt;/li&gt;
  68      * &lt;li&gt;target (required)&lt;/li&gt;
  69      * &lt;li&gt;text (required)&lt;/li&gt;
  70      * &lt;li&gt;title&lt;/li&gt;
  71      * &lt;li&gt;width&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
  72      * @param {Object} config The config object
  73      */
  74     register : function(config){
  75         var configs = Ext.isArray(config) ? config : arguments,
  76             i = 0,
  77             len = configs.length,
  78             target, j, targetLen;
  79
  80         for (; i &lt; len; i++) {
  81             config = configs[i];
  82             target = config.target;
  83             if (target) {
  84                 if (Ext.isArray(target)) {
  85                     for (j = 0, targetLen = target.length; j &lt; targetLen; j++) {
  86                         this.targets[Ext.id(target[j])] = config;
  87                     }
  88                 } else{
  89                     this.targets[Ext.id(target)] = config;
  90                 }
  91             }
  92         }
  93     },
  94
  95 <span id='Ext-tip-QuickTip-method-unregister'>    /**
  96 </span>     * Removes this quick tip from its element and destroys it.
  97      * @param {String/HTMLElement/Ext.Element} el The element from which the quick tip is to be removed or ID of the element.
  98      */
  99     unregister : function(el){
 100         delete this.targets[Ext.id(el)];
 101     },
 102
 103 <span id='Ext-tip-QuickTip-method-cancelShow'>    /**
 104 </span>     * Hides a visible tip or cancels an impending show for a particular element.
 105      * @param {String/HTMLElement/Ext.Element} el The element that is the target of the tip or ID of the element.
 106      */
 107     cancelShow: function(el){
 108         var me = this,
 109             activeTarget = me.activeTarget;
 110
 111         el = Ext.get(el).dom;
 112         if (me.isVisible()) {
 113             if (activeTarget &amp;&amp; activeTarget.el == el) {
 114                 me.hide();
 115             }
 116         } else if (activeTarget &amp;&amp; activeTarget.el == el) {
 117             me.clearTimer('show');
 118         }
 119     },
 120
 121 <span id='Ext-tip-QuickTip-method-getTipCfg'>    /**
 122 </span>     * @private
 123      * Reads the tip text from the closest node to the event target which contains the attribute we
 124      * are configured to look for. Returns an object containing the text from the attribute, and the target element from
 125      * which the text was read.
 126      */
 127     getTipCfg: function(e) {
 128         var t = e.getTarget(),
 129             titleText = t.title,
 130             cfg;
 131
 132         if (this.interceptTitles &amp;&amp; titleText &amp;&amp; Ext.isString(titleText)) {
 133             t.qtip = titleText;
 134             t.removeAttribute(&quot;title&quot;);
 135             e.preventDefault();
 136             return {
 137                 text: titleText
 138             };
 139         }
 140         else {
 141             cfg = this.tagConfig;
 142             t = e.getTarget('[' + cfg.namespace + cfg.attribute + ']');
 143             if (t) {
 144                 return {
 145                     target: t,
 146                     text: t.getAttribute(cfg.namespace + cfg.attribute)
 147                 };
 148             }
 149         }
 150     },
 151
 152     // private
 153     onTargetOver : function(e){
 154         var me = this,
 155             target = e.getTarget(),
 156             elTarget,
 157             cfg,
 158             ns,
 159             tipConfig,
 160             autoHide;
 161
 162         if (me.disabled) {
 163             return;
 164         }
 165
 166         // TODO - this causes &quot;e&quot; to be recycled in IE6/7 (EXTJSIV-1608) so ToolTip#setTarget
 167         // was changed to include freezeEvent. The issue seems to be a nested 'resize' event
 168         // that smashed Ext.EventObject.
 169         me.targetXY = e.getXY();
 170
 171         if(!target || target.nodeType !== 1 || target == document || target == document.body){
 172             return;
 173         }
 174
 175         if (me.activeTarget &amp;&amp; ((target == me.activeTarget.el) || Ext.fly(me.activeTarget.el).contains(target))) {
 176             me.clearTimer('hide');
 177             me.show();
 178             return;
 179         }
 180
 181         if (target) {
 182             Ext.Object.each(me.targets, function(key, value) {
 183                 var targetEl = Ext.fly(value.target);
 184                 if (targetEl &amp;&amp; (targetEl.dom === target || targetEl.contains(target))) {
 185                     elTarget = targetEl.dom;
 186                     return false;
 187                 }
 188             });
 189             if (elTarget) {
 190                 me.activeTarget = me.targets[elTarget.id];
 191                 me.activeTarget.el = target;
 192                 me.anchor = me.activeTarget.anchor;
 193                 if (me.anchor) {
 194                     me.anchorTarget = target;
 195                 }
 196                 me.delayShow();
 197                 return;
 198             }
 199         }
 200
 201         elTarget = Ext.get(target);
 202         cfg = me.tagConfig;
 203         ns = cfg.namespace;
 204         tipConfig = me.getTipCfg(e);
 205
 206         if (tipConfig) {
 207
 208             // getTipCfg may look up the parentNode axis for a tip text attribute and will return the new target node.
 209             // Change our target element to match that from which the tip text attribute was read.
 210             if (tipConfig.target) {
 211                 target = tipConfig.target;
 212                 elTarget = Ext.get(target);
 213             }
 214             autoHide = elTarget.getAttribute(ns + cfg.hide);
 215
 216             me.activeTarget = {
 217                 el: target,
 218                 text: tipConfig.text,
 219                 width: +elTarget.getAttribute(ns + cfg.width) || null,
 220                 autoHide: autoHide != &quot;user&quot; &amp;&amp; autoHide !== 'false',
 221                 title: elTarget.getAttribute(ns + cfg.title),
 222                 cls: elTarget.getAttribute(ns + cfg.cls),
 223                 align: elTarget.getAttribute(ns + cfg.align)
 224
 225             };
 226             me.anchor = elTarget.getAttribute(ns + cfg.anchor);
 227             if (me.anchor) {
 228                 me.anchorTarget = target;
 229             }
 230             me.delayShow();
 231         }
 232     },
 233
 234     // private
 235     onTargetOut : function(e){
 236         var me = this;
 237
 238         // If moving within the current target, and it does not have a new tip, ignore the mouseout
 239         if (me.activeTarget &amp;&amp; e.within(me.activeTarget.el) &amp;&amp; !me.getTipCfg(e)) {
 240             return;
 241         }
 242
 243         me.clearTimer('show');
 244         if (me.autoHide !== false) {
 245             me.delayHide();
 246         }
 247     },
 248
 249     // inherit docs
 250     showAt : function(xy){
 251         var me = this,
 252             target = me.activeTarget;
 253
 254         if (target) {
 255             if (!me.rendered) {
 256                 me.render(Ext.getBody());
 257                 me.activeTarget = target;
 258             }
 259             if (target.title) {
 260                 me.setTitle(target.title || '');
 261                 me.header.show();
 262             } else {
 263                 me.header.hide();
 264             }
 265             me.body.update(target.text);
 266             me.autoHide = target.autoHide;
 267             me.dismissDelay = target.dismissDelay || me.dismissDelay;
 268             if (me.lastCls) {
 269                 me.el.removeCls(me.lastCls);
 270                 delete me.lastCls;
 271             }
 272             if (target.cls) {
 273                 me.el.addCls(target.cls);
 274                 me.lastCls = target.cls;
 275             }
 276
 277             me.setWidth(target.width);
 278
 279             if (me.anchor) {
 280                 me.constrainPosition = false;
 281             } else if (target.align) { // TODO: this doesn't seem to work consistently
 282                 xy = me.el.getAlignToXY(target.el, target.align);
 283                 me.constrainPosition = false;
 284             }else{
 285                 me.constrainPosition = true;
 286             }
 287         }
 288         me.callParent([xy]);
 289     },
 290
 291     // inherit docs
 292     hide: function(){
 293         delete this.activeTarget;
 294         this.callParent();
 295     }
 296 });
 297 </pre>
 298 </body>
 299 </html>