Upgrade to ExtJS 3.1.0 - Released 12/16/2009
[extjs.git] / docs / source / QuickTip.html
1 <html>\r
2 <head>\r
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
4   <title>The source code</title>\r
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
7 </head>\r
8 <body  onload="prettyPrint();">\r
9     <pre class="prettyprint lang-js"><div id="cls-Ext.QuickTip"></div>/**\r
10  * @class Ext.QuickTip\r
11  * @extends Ext.ToolTip\r
12  * @xtype quicktip\r
13  * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global\r
14  * {@link Ext.QuickTips} instance.  See the QuickTips class header for additional usage details and examples.\r
15  * @constructor\r
16  * Create a new Tip\r
17  * @param {Object} config The configuration options\r
18  */\r
19 Ext.QuickTip = Ext.extend(Ext.ToolTip, {\r
20     <div id="cfg-Ext.QuickTip-target"></div>/**\r
21      * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to associate with this quicktip (defaults to the document).\r
22      */\r
23     <div id="cfg-Ext.QuickTip-interceptTitles"></div>/**\r
24      * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available (defaults to false).\r
25      */\r
26     interceptTitles : false,\r
27 \r
28     // private\r
29     tagConfig : {\r
30         namespace : "ext",\r
31         attribute : "qtip",\r
32         width : "qwidth",\r
33         target : "target",\r
34         title : "qtitle",\r
35         hide : "hide",\r
36         cls : "qclass",\r
37         align : "qalign",\r
38         anchor : "anchor"\r
39     },\r
40 \r
41     // private\r
42     initComponent : function(){\r
43         this.target = this.target || Ext.getDoc();\r
44         this.targets = this.targets || {};\r
45         Ext.QuickTip.superclass.initComponent.call(this);\r
46     },\r
47 \r
48     <div id="method-Ext.QuickTip-register"></div>/**\r
49      * Configures a new quick tip instance and assigns it to a target element.  The following config values are\r
50      * supported (for example usage, see the {@link Ext.QuickTips} class header):\r
51      * <div class="mdetail-params"><ul>\r
52      * <li>autoHide</li>\r
53      * <li>cls</li>\r
54      * <li>dismissDelay (overrides the singleton value)</li>\r
55      * <li>target (required)</li>\r
56      * <li>text (required)</li>\r
57      * <li>title</li>\r
58      * <li>width</li></ul></div>\r
59      * @param {Object} config The config object\r
60      */\r
61     register : function(config){\r
62         var cs = Ext.isArray(config) ? config : arguments;\r
63         for(var i = 0, len = cs.length; i < len; i++){\r
64             var c = cs[i];\r
65             var target = c.target;\r
66             if(target){\r
67                 if(Ext.isArray(target)){\r
68                     for(var j = 0, jlen = target.length; j < jlen; j++){\r
69                         this.targets[Ext.id(target[j])] = c;\r
70                     }\r
71                 } else{\r
72                     this.targets[Ext.id(target)] = c;\r
73                 }\r
74             }\r
75         }\r
76     },\r
77 \r
78     <div id="method-Ext.QuickTip-unregister"></div>/**\r
79      * Removes this quick tip from its element and destroys it.\r
80      * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.\r
81      */\r
82     unregister : function(el){\r
83         delete this.targets[Ext.id(el)];\r
84     },\r
85     \r
86     <div id="method-Ext.QuickTip-cancelShow"></div>/**\r
87      * Hides a visible tip or cancels an impending show for a particular element.\r
88      * @param {String/HTMLElement/Element} el The element that is the target of the tip.\r
89      */\r
90     cancelShow: function(el){\r
91         var at = this.activeTarget;\r
92         el = Ext.get(el).dom;\r
93         if(this.isVisible()){\r
94             if(at && at.el == el){\r
95                 this.hide();\r
96             }\r
97         }else if(at && at.el == el){\r
98             this.clearTimer('show');\r
99         }\r
100     },\r
101     \r
102     getTipCfg: function(e) {\r
103         var t = e.getTarget(), \r
104             ttp, \r
105             cfg;\r
106         if(this.interceptTitles && t.title && Ext.isString(t.title)){\r
107             ttp = t.title;\r
108             t.qtip = ttp;\r
109             t.removeAttribute("title");\r
110             e.preventDefault();\r
111         }else{\r
112             cfg = this.tagConfig;\r
113             ttp = t.qtip || Ext.fly(t).getAttribute(cfg.attribute, cfg.namespace);\r
114         }\r
115         return ttp;\r
116     },\r
117 \r
118     // private\r
119     onTargetOver : function(e){\r
120         if(this.disabled){\r
121             return;\r
122         }\r
123         this.targetXY = e.getXY();\r
124         var t = e.getTarget();\r
125         if(!t || t.nodeType !== 1 || t == document || t == document.body){\r
126             return;\r
127         }\r
128         if(this.activeTarget && ((t == this.activeTarget.el) || Ext.fly(this.activeTarget.el).contains(t))){\r
129             this.clearTimer('hide');\r
130             this.show();\r
131             return;\r
132         }\r
133         if(t && this.targets[t.id]){\r
134             this.activeTarget = this.targets[t.id];\r
135             this.activeTarget.el = t;\r
136             this.anchor = this.activeTarget.anchor;\r
137             if(this.anchor){\r
138                 this.anchorTarget = t;\r
139             }\r
140             this.delayShow();\r
141             return;\r
142         }\r
143         var ttp, et = Ext.fly(t), cfg = this.tagConfig, ns = cfg.namespace;\r
144         if(ttp = this.getTipCfg(e)){\r
145             var autoHide = et.getAttribute(cfg.hide, ns);\r
146             this.activeTarget = {\r
147                 el: t,\r
148                 text: ttp,\r
149                 width: et.getAttribute(cfg.width, ns),\r
150                 autoHide: autoHide != "user" && autoHide !== 'false',\r
151                 title: et.getAttribute(cfg.title, ns),\r
152                 cls: et.getAttribute(cfg.cls, ns),\r
153                 align: et.getAttribute(cfg.align, ns)\r
154                 \r
155             };\r
156             this.anchor = et.getAttribute(cfg.anchor, ns);\r
157             if(this.anchor){\r
158                 this.anchorTarget = t;\r
159             }\r
160             this.delayShow();\r
161         }\r
162     },\r
163 \r
164     // private\r
165     onTargetOut : function(e){\r
166 \r
167         // If moving within the current target, and it does not have a new tip, ignore the mouseout\r
168         if (this.activeTarget && e.within(this.activeTarget.el) && !this.getTipCfg(e)) {\r
169             return;\r
170         }\r
171 \r
172         this.clearTimer('show');\r
173         if(this.autoHide !== false){\r
174             this.delayHide();\r
175         }\r
176     },\r
177 \r
178     // inherit docs\r
179     showAt : function(xy){\r
180         var t = this.activeTarget;\r
181         if(t){\r
182             if(!this.rendered){\r
183                 this.render(Ext.getBody());\r
184                 this.activeTarget = t;\r
185             }\r
186             if(t.width){\r
187                 this.setWidth(t.width);\r
188                 this.body.setWidth(this.adjustBodyWidth(t.width - this.getFrameWidth()));\r
189                 this.measureWidth = false;\r
190             } else{\r
191                 this.measureWidth = true;\r
192             }\r
193             this.setTitle(t.title || '');\r
194             this.body.update(t.text);\r
195             this.autoHide = t.autoHide;\r
196             this.dismissDelay = t.dismissDelay || this.dismissDelay;\r
197             if(this.lastCls){\r
198                 this.el.removeClass(this.lastCls);\r
199                 delete this.lastCls;\r
200             }\r
201             if(t.cls){\r
202                 this.el.addClass(t.cls);\r
203                 this.lastCls = t.cls;\r
204             }\r
205             if(this.anchor){\r
206                 this.constrainPosition = false;\r
207             }else if(t.align){ // TODO: this doesn't seem to work consistently\r
208                 xy = this.el.getAlignToXY(t.el, t.align);\r
209                 this.constrainPosition = false;\r
210             }else{\r
211                 this.constrainPosition = true;\r
212             }\r
213         }\r
214         Ext.QuickTip.superclass.showAt.call(this, xy);\r
215     },\r
216 \r
217     // inherit docs\r
218     hide: function(){\r
219         delete this.activeTarget;\r
220         Ext.QuickTip.superclass.hide.call(this);\r
221     }\r
222 });\r
223 Ext.reg('quicktip', Ext.QuickTip);</pre>    \r
224 </body>\r
225 </html>