source/widgets/tips/QuickTip.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\r
  10  * @class Ext.QuickTip\r
  11  * @extends Ext.ToolTip\r
  12  * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global\r
  13  * {@link Ext.QuickTips} instance.  See the QuickTips class header for additional usage details and examples.\r
  14  * @constructor\r
  15  * Create a new Tip\r
  16  * @param {Object} config The configuration options\r
  17  */\r
  18 Ext.QuickTip = Ext.extend(Ext.ToolTip, {\r
  19     /**\r
  20      * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to associate with this quicktip (defaults to the document).\r
  21      */\r
  22     /**\r
  23      * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available (defaults to false).\r
  24      */\r
  25     interceptTitles : false,\r
  26 \r
  27     // private\r
  28     tagConfig : {\r
  29         namespace : "ext",\r
  30         attribute : "qtip",\r
  31         width : "qwidth",\r
  32         target : "target",\r
  33         title : "qtitle",\r
  34         hide : "hide",\r
  35         cls : "qclass",\r
  36         align : "qalign"\r
  37     },\r
  38 \r
  39     // private\r
  40     initComponent : function(){\r
  41         this.target = this.target || Ext.getDoc();\r
  42         this.targets = this.targets || {};\r
  43         Ext.QuickTip.superclass.initComponent.call(this);\r
  44     },\r
  45 \r
  46     /**\r
  47      * Configures a new quick tip instance and assigns it to a target element.  The following config values are\r
  48      * supported (for example usage, see the {@link Ext.QuickTips} class header):\r
  49      * <div class="mdetail-params"><ul>\r
  50      * <li>autoHide</li>\r
  51      * <li>cls</li>\r
  52      * <li>dismissDelay (overrides the singleton value)</li>\r
  53      * <li>target (required)</li>\r
  54      * <li>text (required)</li>\r
  55      * <li>title</li>\r
  56      * <li>width</li></ul></div>\r
  57      * @param {Object} config The config object\r
  58      */\r
  59     register : function(config){\r
  60         var cs = Ext.isArray(config) ? config : arguments;\r
  61         for(var i = 0, len = cs.length; i < len; i++){\r
  62             var c = cs[i];\r
  63             var target = c.target;\r
  64             if(target){\r
  65                 if(Ext.isArray(target)){\r
  66                     for(var j = 0, jlen = target.length; j < jlen; j++){\r
  67                         this.targets[Ext.id(target[j])] = c;\r
  68                     }\r
  69                 } else{\r
  70                     this.targets[Ext.id(target)] = c;\r
  71                 }\r
  72             }\r
  73         }\r
  74     },\r
  75 \r
  76     /**\r
  77      * Removes this quick tip from its element and destroys it.\r
  78      * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.\r
  79      */\r
  80     unregister : function(el){\r
  81         delete this.targets[Ext.id(el)];\r
  82     },\r
  83 \r
  84     // private\r
  85     onTargetOver : function(e){\r
  86         if(this.disabled){\r
  87             return;\r
  88         }\r
  89         this.targetXY = e.getXY();\r
  90         var t = e.getTarget();\r
  91         if(!t || t.nodeType !== 1 || t == document || t == document.body){\r
  92             return;\r
  93         }\r
  94         if(this.activeTarget && t == this.activeTarget.el){\r
  95             this.clearTimer('hide');\r
  96             this.show();\r
  97             return;\r
  98         }\r
  99         if(t && this.targets[t.id]){\r
 100             this.activeTarget = this.targets[t.id];\r
 101             this.activeTarget.el = t;\r
 102             this.delayShow();\r
 103             return;\r
 104         }\r
 105         var ttp, et = Ext.fly(t), cfg = this.tagConfig;\r
 106         var ns = cfg.namespace;\r
 107         if(this.interceptTitles && t.title){\r
 108             ttp = t.title;\r
 109             t.qtip = ttp;\r
 110             t.removeAttribute("title");\r
 111             e.preventDefault();\r
 112         } else{\r
 113             ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute);\r
 114         }\r
 115         if(ttp){\r
 116             var autoHide = et.getAttributeNS(ns, cfg.hide);\r
 117             this.activeTarget = {\r
 118                 el: t,\r
 119                 text: ttp,\r
 120                 width: et.getAttributeNS(ns, cfg.width),\r
 121                 autoHide: autoHide != "user" && autoHide !== 'false',\r
 122                 title: et.getAttributeNS(ns, cfg.title),\r
 123                 cls: et.getAttributeNS(ns, cfg.cls),\r
 124                 align: et.getAttributeNS(ns, cfg.align)\r
 125             };\r
 126             this.delayShow();\r
 127         }\r
 128     },\r
 129 \r
 130     // private\r
 131     onTargetOut : function(e){\r
 132         this.clearTimer('show');\r
 133         if(this.autoHide !== false){\r
 134             this.delayHide();\r
 135         }\r
 136     },\r
 137 \r
 138     // inherit docs\r
 139     showAt : function(xy){\r
 140         var t = this.activeTarget;\r
 141         if(t){\r
 142             if(!this.rendered){\r
 143                 this.render(Ext.getBody());\r
 144                 this.activeTarget = t;\r
 145             }\r
 146             if(t.width){\r
 147                 this.setWidth(t.width);\r
 148                 this.body.setWidth(this.adjustBodyWidth(t.width - this.getFrameWidth()));\r
 149                 this.measureWidth = false;\r
 150             } else{\r
 151                 this.measureWidth = true;\r
 152             }\r
 153             this.setTitle(t.title || '');\r
 154             this.body.update(t.text);\r
 155             this.autoHide = t.autoHide;\r
 156             this.dismissDelay = t.dismissDelay || this.dismissDelay;\r
 157             if(this.lastCls){\r
 158                 this.el.removeClass(this.lastCls);\r
 159                 delete this.lastCls;\r
 160             }\r
 161             if(t.cls){\r
 162                 this.el.addClass(t.cls);\r
 163                 this.lastCls = t.cls;\r
 164             }\r
 165             if(t.align){ // TODO: this doesn't seem to work consistently\r
 166                 xy = this.el.getAlignToXY(t.el, t.align);\r
 167                 this.constrainPosition = false;\r
 168             } else{\r
 169                 this.constrainPosition = true;\r
 170             }\r
 171         }\r
 172         Ext.QuickTip.superclass.showAt.call(this, xy);\r
 173     },\r
 174 \r
 175     // inherit docs\r
 176     hide: function(){\r
 177         delete this.activeTarget;\r
 178         Ext.QuickTip.superclass.hide.call(this);\r
 179     }\r
 180 });