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