Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / QuickTip.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js"><div id="cls-Ext.QuickTip"></div>/**\r
9  * @class Ext.QuickTip\r
10  * @extends Ext.ToolTip\r
11  * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global\r
12  * {@link Ext.QuickTips} instance.  See the QuickTips class header for additional usage details and examples.\r
13  * @constructor\r
14  * Create a new Tip\r
15  * @param {Object} config The configuration options\r
16  */\r
17 Ext.QuickTip = Ext.extend(Ext.ToolTip, {\r
18     <div id="cfg-Ext.QuickTip-target"></div>/**\r
19      * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to associate with this quicktip (defaults to the document).\r
20      */\r
21     <div id="cfg-Ext.QuickTip-interceptTitles"></div>/**\r
22      * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available (defaults to false).\r
23      */\r
24     interceptTitles : false,\r
25 \r
26     // private\r
27     tagConfig : {\r
28         namespace : "ext",\r
29         attribute : "qtip",\r
30         width : "qwidth",\r
31         target : "target",\r
32         title : "qtitle",\r
33         hide : "hide",\r
34         cls : "qclass",\r
35         align : "qalign",\r
36         anchor : "anchor"\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     <div id="method-Ext.QuickTip-register"></div>/**\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     <div id="method-Ext.QuickTip-unregister"></div>/**\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     <div id="method-Ext.QuickTip-cancelShow"></div>/**\r
85      * Hides a visible tip or cancels an impending show for a particular element.\r
86      * @param {String/HTMLElement/Element} el The element that is the target of the tip.\r
87      */\r
88     cancelShow: function(el){\r
89         var at = this.activeTarget;\r
90         el = Ext.get(el).dom;\r
91         if(this.isVisible()){\r
92             if(at && at.el == el){\r
93                 this.hide();\r
94             }\r
95         }else if(at && at.el == el){\r
96             this.clearTimer('show');\r
97         }\r
98     },\r
99 \r
100     // private\r
101     onTargetOver : function(e){\r
102         if(this.disabled){\r
103             return;\r
104         }\r
105         this.targetXY = e.getXY();\r
106         var t = e.getTarget();\r
107         if(!t || t.nodeType !== 1 || t == document || t == document.body){\r
108             return;\r
109         }\r
110         if(this.activeTarget && t == this.activeTarget.el){\r
111             this.clearTimer('hide');\r
112             this.show();\r
113             return;\r
114         }\r
115         if(t && this.targets[t.id]){\r
116             this.activeTarget = this.targets[t.id];\r
117             this.activeTarget.el = t;\r
118             this.anchor = this.activeTarget.anchor;\r
119             if(this.anchor){\r
120                 this.anchorTarget = t;\r
121             }\r
122             this.delayShow();\r
123             return;\r
124         }\r
125         \r
126         var ttp, et = Ext.fly(t), cfg = this.tagConfig;\r
127         var ns = cfg.namespace;\r
128         if(this.interceptTitles && t.title){\r
129             ttp = t.title;\r
130             t.qtip = ttp;\r
131             t.removeAttribute("title");\r
132             e.preventDefault();\r
133         } else{\r
134             ttp = t.qtip || et.getAttribute(cfg.attribute, ns);\r
135         }\r
136         if(ttp){\r
137             var autoHide = et.getAttribute(cfg.hide, ns);\r
138             this.activeTarget = {\r
139                 el: t,\r
140                 text: ttp,\r
141                 width: et.getAttribute(cfg.width, ns),\r
142                 autoHide: autoHide != "user" && autoHide !== 'false',\r
143                 title: et.getAttribute(cfg.title, ns),\r
144                 cls: et.getAttribute(cfg.cls, ns),\r
145                 align: et.getAttribute(cfg.align, ns)\r
146                 \r
147             };\r
148             this.anchor = et.getAttribute(cfg.anchor, ns);\r
149             if(this.anchor){\r
150                 this.anchorTarget = t;\r
151             }\r
152             this.delayShow();\r
153         }\r
154     },\r
155 \r
156     // private\r
157     onTargetOut : function(e){\r
158         this.clearTimer('show');\r
159         if(this.autoHide !== false){\r
160             this.delayHide();\r
161         }\r
162     },\r
163 \r
164     // inherit docs\r
165     showAt : function(xy){\r
166         var t = this.activeTarget;\r
167         if(t){\r
168             if(!this.rendered){\r
169                 this.render(Ext.getBody());\r
170                 this.activeTarget = t;\r
171             }\r
172             if(t.width){\r
173                 this.setWidth(t.width);\r
174                 this.body.setWidth(this.adjustBodyWidth(t.width - this.getFrameWidth()));\r
175                 this.measureWidth = false;\r
176             } else{\r
177                 this.measureWidth = true;\r
178             }\r
179             this.setTitle(t.title || '');\r
180             this.body.update(t.text);\r
181             this.autoHide = t.autoHide;\r
182             this.dismissDelay = t.dismissDelay || this.dismissDelay;\r
183             if(this.lastCls){\r
184                 this.el.removeClass(this.lastCls);\r
185                 delete this.lastCls;\r
186             }\r
187             if(t.cls){\r
188                 this.el.addClass(t.cls);\r
189                 this.lastCls = t.cls;\r
190             }\r
191             if(this.anchor){\r
192                 this.constrainPosition = false;\r
193             }else if(t.align){ // TODO: this doesn't seem to work consistently\r
194                 xy = this.el.getAlignToXY(t.el, t.align);\r
195                 this.constrainPosition = false;\r
196             }else{\r
197                 this.constrainPosition = true;\r
198             }\r
199         }\r
200         Ext.QuickTip.superclass.showAt.call(this, xy);\r
201     },\r
202 \r
203     // inherit docs\r
204     hide: function(){\r
205         delete this.activeTarget;\r
206         Ext.QuickTip.superclass.hide.call(this);\r
207     }\r
208 });</pre>    \r
209 </body>\r
210 </html>