Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / pkgs / pkg-tips-debug.js
1 /*!
2  * Ext JS Library 3.1.1
3  * Copyright(c) 2006-2010 Ext JS, LLC
4  * licensing@extjs.com
5  * http://www.extjs.com/license
6  */
7 /**\r
8  * @class Ext.Tip\r
9  * @extends Ext.Panel\r
10  * @xtype tip\r
11  * This is the base class for {@link Ext.QuickTip} and {@link Ext.Tooltip} that provides the basic layout and\r
12  * positioning that all tip-based classes require. This class can be used directly for simple, statically-positioned\r
13  * tips that are displayed programmatically, or it can be extended to provide custom tip implementations.\r
14  * @constructor\r
15  * Create a new Tip\r
16  * @param {Object} config The configuration options\r
17  */\r
18 Ext.Tip = Ext.extend(Ext.Panel, {\r
19     /**\r
20      * @cfg {Boolean} closable True to render a close tool button into the tooltip header (defaults to false).\r
21      */\r
22     /**\r
23      * @cfg {Number} width\r
24      * Width in pixels of the tip (defaults to auto).  Width will be ignored if it exceeds the bounds of\r
25      * {@link #minWidth} or {@link #maxWidth}.  The maximum supported value is 500.\r
26      */\r
27     /**\r
28      * @cfg {Number} minWidth The minimum width of the tip in pixels (defaults to 40).\r
29      */\r
30     minWidth : 40,\r
31     /**\r
32      * @cfg {Number} maxWidth The maximum width of the tip in pixels (defaults to 300).  The maximum supported value is 500.\r
33      */\r
34     maxWidth : 300,\r
35     /**\r
36      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"\r
37      * for bottom-right shadow (defaults to "sides").\r
38      */\r
39     shadow : "sides",\r
40     /**\r
41      * @cfg {String} defaultAlign <b>Experimental</b>. The default {@link Ext.Element#alignTo} anchor position value\r
42      * for this tip relative to its element of origin (defaults to "tl-bl?").\r
43      */\r
44     defaultAlign : "tl-bl?",\r
45     autoRender: true,\r
46     quickShowInterval : 250,\r
47 \r
48     // private panel overrides\r
49     frame:true,\r
50     hidden:true,\r
51     baseCls: 'x-tip',\r
52     floating:{shadow:true,shim:true,useDisplay:true,constrain:false},\r
53     autoHeight:true,\r
54 \r
55     closeAction: 'hide',\r
56 \r
57     // private\r
58     initComponent : function(){\r
59         Ext.Tip.superclass.initComponent.call(this);\r
60         if(this.closable && !this.title){\r
61             this.elements += ',header';\r
62         }\r
63     },\r
64 \r
65     // private\r
66     afterRender : function(){\r
67         Ext.Tip.superclass.afterRender.call(this);\r
68         if(this.closable){\r
69             this.addTool({\r
70                 id: 'close',\r
71                 handler: this[this.closeAction],\r
72                 scope: this\r
73             });\r
74         }\r
75     },\r
76 \r
77     /**\r
78      * Shows this tip at the specified XY position.  Example usage:\r
79      * <pre><code>\r
80 // Show the tip at x:50 and y:100\r
81 tip.showAt([50,100]);\r
82 </code></pre>\r
83      * @param {Array} xy An array containing the x and y coordinates\r
84      */\r
85     showAt : function(xy){\r
86         Ext.Tip.superclass.show.call(this);\r
87         if(this.measureWidth !== false && (!this.initialConfig || typeof this.initialConfig.width != 'number')){\r
88             this.doAutoWidth();\r
89         }\r
90         if(this.constrainPosition){\r
91             xy = this.el.adjustForConstraints(xy);\r
92         }\r
93         this.setPagePosition(xy[0], xy[1]);\r
94     },\r
95 \r
96     // protected\r
97     doAutoWidth : function(adjust){\r
98         adjust = adjust || 0;\r
99         var bw = this.body.getTextWidth();\r
100         if(this.title){\r
101             bw = Math.max(bw, this.header.child('span').getTextWidth(this.title));\r
102         }\r
103         bw += this.getFrameWidth() + (this.closable ? 20 : 0) + this.body.getPadding("lr") + adjust;\r
104         this.setWidth(bw.constrain(this.minWidth, this.maxWidth));\r
105         \r
106         // IE7 repaint bug on initial show\r
107         if(Ext.isIE7 && !this.repainted){\r
108             this.el.repaint();\r
109             this.repainted = true;\r
110         }\r
111     },\r
112 \r
113     /**\r
114      * <b>Experimental</b>. Shows this tip at a position relative to another element using a standard {@link Ext.Element#alignTo}\r
115      * anchor position value.  Example usage:\r
116      * <pre><code>\r
117 // Show the tip at the default position ('tl-br?')\r
118 tip.showBy('my-el');\r
119 \r
120 // Show the tip's top-left corner anchored to the element's top-right corner\r
121 tip.showBy('my-el', 'tl-tr');\r
122 </code></pre>\r
123      * @param {Mixed} el An HTMLElement, Ext.Element or string id of the target element to align to\r
124      * @param {String} position (optional) A valid {@link Ext.Element#alignTo} anchor position (defaults to 'tl-br?' or\r
125      * {@link #defaultAlign} if specified).\r
126      */\r
127     showBy : function(el, pos){\r
128         if(!this.rendered){\r
129             this.render(Ext.getBody());\r
130         }\r
131         this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign));\r
132     },\r
133 \r
134     initDraggable : function(){\r
135         this.dd = new Ext.Tip.DD(this, typeof this.draggable == 'boolean' ? null : this.draggable);\r
136         this.header.addClass('x-tip-draggable');\r
137     }\r
138 });\r
139 \r
140 Ext.reg('tip', Ext.Tip);\r
141 \r
142 // private - custom Tip DD implementation\r
143 Ext.Tip.DD = function(tip, config){\r
144     Ext.apply(this, config);\r
145     this.tip = tip;\r
146     Ext.Tip.DD.superclass.constructor.call(this, tip.el.id, 'WindowDD-'+tip.id);\r
147     this.setHandleElId(tip.header.id);\r
148     this.scroll = false;\r
149 };\r
150 \r
151 Ext.extend(Ext.Tip.DD, Ext.dd.DD, {\r
152     moveOnly:true,\r
153     scroll:false,\r
154     headerOffsets:[100, 25],\r
155     startDrag : function(){\r
156         this.tip.el.disableShadow();\r
157     },\r
158     endDrag : function(e){\r
159         this.tip.el.enableShadow(true);\r
160     }\r
161 });/**\r
162  * @class Ext.ToolTip\r
163  * @extends Ext.Tip\r
164  * A standard tooltip implementation for providing additional information when hovering over a target element.\r
165  * @xtype tooltip\r
166  * @constructor\r
167  * Create a new Tooltip\r
168  * @param {Object} config The configuration options\r
169  */\r
170 Ext.ToolTip = Ext.extend(Ext.Tip, {\r
171     /**\r
172      * When a Tooltip is configured with the <code>{@link #delegate}</code>\r
173      * option to cause selected child elements of the <code>{@link #target}</code>\r
174      * Element to each trigger a seperate show event, this property is set to\r
175      * the DOM element which triggered the show.\r
176      * @type DOMElement\r
177      * @property triggerElement\r
178      */\r
179     /**\r
180      * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor\r
181      * for mouseover events to trigger showing this ToolTip.\r
182      */\r
183     /**\r
184      * @cfg {Boolean} autoHide True to automatically hide the tooltip after the\r
185      * mouse exits the target element or after the <code>{@link #dismissDelay}</code>\r
186      * has expired if set (defaults to true).  If <code>{@link closable} = true</code>\r
187      * a close tool button will be rendered into the tooltip header.\r
188      */\r
189     /**\r
190      * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays\r
191      * after the mouse enters the target element (defaults to 500)\r
192      */\r
193     showDelay : 500,\r
194     /**\r
195      * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the\r
196      * target element but before the tooltip actually hides (defaults to 200).\r
197      * Set to 0 for the tooltip to hide immediately.\r
198      */\r
199     hideDelay : 200,\r
200     /**\r
201      * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip\r
202      * automatically hides (defaults to 5000). To disable automatic hiding, set\r
203      * dismissDelay = 0.\r
204      */\r
205     dismissDelay : 5000,\r
206     /**\r
207      * @cfg {Array} mouseOffset An XY offset from the mouse position where the\r
208      * tooltip should be shown (defaults to [15,18]).\r
209      */\r
210     /**\r
211      * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it\r
212      * moves over the target element (defaults to false).\r
213      */\r
214     trackMouse : false,\r
215     /**\r
216      * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target\r
217      * element, false to anchor it relative to the mouse coordinates (defaults\r
218      * to true).  When <code>anchorToTarget</code> is true, use\r
219      * <code>{@link #defaultAlign}</code> to control tooltip alignment to the\r
220      * target element.  When <code>anchorToTarget</code> is false, use\r
221      * <code>{@link #anchorPosition}</code> instead to control alignment.\r
222      */\r
223     anchorToTarget : true,\r
224     /**\r
225      * @cfg {Number} anchorOffset A numeric pixel value used to offset the\r
226      * default position of the anchor arrow (defaults to 0).  When the anchor\r
227      * position is on the top or bottom of the tooltip, <code>anchorOffset</code>\r
228      * will be used as a horizontal offset.  Likewise, when the anchor position\r
229      * is on the left or right side, <code>anchorOffset</code> will be used as\r
230      * a vertical offset.\r
231      */\r
232     anchorOffset : 0,\r
233     /**\r
234      * @cfg {String} delegate <p>Optional. A {@link Ext.DomQuery DomQuery}\r
235      * selector which allows selection of individual elements within the\r
236      * <code>{@link #target}</code> element to trigger showing and hiding the\r
237      * ToolTip as the mouse moves within the target.</p>\r
238      * <p>When specified, the child element of the target which caused a show\r
239      * event is placed into the <code>{@link #triggerElement}</code> property\r
240      * before the ToolTip is shown.</p>\r
241      * <p>This may be useful when a Component has regular, repeating elements\r
242      * in it, each of which need a Tooltip which contains information specific\r
243      * to that element. For example:</p><pre><code>\r
244 var myGrid = new Ext.grid.gridPanel(gridConfig);\r
245 myGrid.on('render', function(grid) {\r
246     var store = grid.getStore();  // Capture the Store.\r
247     var view = grid.getView();    // Capture the GridView.\r
248     myGrid.tip = new Ext.ToolTip({\r
249         target: view.mainBody,    // The overall target element.\r
250         delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.\r
251         trackMouse: true,         // Moving within the row should not hide the tip.\r
252         renderTo: document.body,  // Render immediately so that tip.body can be\r
253                                   //  referenced prior to the first show.\r
254         listeners: {              // Change content dynamically depending on which element\r
255                                   //  triggered the show.\r
256             beforeshow: function updateTipBody(tip) {\r
257                 var rowIndex = view.findRowIndex(tip.triggerElement);\r
258                 tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;\r
259             }\r
260         }\r
261     });\r
262 });\r
263      *</code></pre>\r
264      */\r
265 \r
266     // private\r
267     targetCounter : 0,\r
268 \r
269     constrainPosition : false,\r
270 \r
271     // private\r
272     initComponent : function(){\r
273         Ext.ToolTip.superclass.initComponent.call(this);\r
274         this.lastActive = new Date();\r
275         this.initTarget(this.target);\r
276         this.origAnchor = this.anchor;\r
277     },\r
278 \r
279     // private\r
280     onRender : function(ct, position){\r
281         Ext.ToolTip.superclass.onRender.call(this, ct, position);\r
282         this.anchorCls = 'x-tip-anchor-' + this.getAnchorPosition();\r
283         this.anchorEl = this.el.createChild({\r
284             cls: 'x-tip-anchor ' + this.anchorCls\r
285         });\r
286     },\r
287 \r
288     // private\r
289     afterRender : function(){\r
290         Ext.ToolTip.superclass.afterRender.call(this);\r
291         this.anchorEl.setStyle('z-index', this.el.getZIndex() + 1);\r
292     },\r
293 \r
294     /**\r
295      * Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.\r
296      * @param {Mixed} t The Element, HtmlElement, or ID of an element to bind to\r
297      */\r
298     initTarget : function(target){\r
299         var t;\r
300         if((t = Ext.get(target))){\r
301             if(this.target){\r
302                 var tg = Ext.get(this.target);\r
303                 this.mun(tg, 'mouseover', this.onTargetOver, this);\r
304                 this.mun(tg, 'mouseout', this.onTargetOut, this);\r
305                 this.mun(tg, 'mousemove', this.onMouseMove, this);\r
306             }\r
307             this.mon(t, {\r
308                 mouseover: this.onTargetOver,\r
309                 mouseout: this.onTargetOut,\r
310                 mousemove: this.onMouseMove,\r
311                 scope: this\r
312             });\r
313             this.target = t;\r
314         }\r
315         if(this.anchor){\r
316             this.anchorTarget = this.target;\r
317         }\r
318     },\r
319 \r
320     // private\r
321     onMouseMove : function(e){\r
322         var t = this.delegate ? e.getTarget(this.delegate) : this.triggerElement = true;\r
323         if (t) {\r
324             this.targetXY = e.getXY();\r
325             if (t === this.triggerElement) {\r
326                 if(!this.hidden && this.trackMouse){\r
327                     this.setPagePosition(this.getTargetXY());\r
328                 }\r
329             } else {\r
330                 this.hide();\r
331                 this.lastActive = new Date(0);\r
332                 this.onTargetOver(e);\r
333             }\r
334         } else if (!this.closable && this.isVisible()) {\r
335             this.hide();\r
336         }\r
337     },\r
338 \r
339     // private\r
340     getTargetXY : function(){\r
341         if(this.delegate){\r
342             this.anchorTarget = this.triggerElement;\r
343         }\r
344         if(this.anchor){\r
345             this.targetCounter++;\r
346             var offsets = this.getOffsets(),\r
347                 xy = (this.anchorToTarget && !this.trackMouse) ? this.el.getAlignToXY(this.anchorTarget, this.getAnchorAlign()) : this.targetXY,\r
348                 dw = Ext.lib.Dom.getViewWidth() - 5,\r
349                 dh = Ext.lib.Dom.getViewHeight() - 5,\r
350                 de = document.documentElement,\r
351                 bd = document.body,\r
352                 scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5,\r
353                 scrollY = (de.scrollTop || bd.scrollTop || 0) + 5,\r
354                 axy = [xy[0] + offsets[0], xy[1] + offsets[1]],\r
355                 sz = this.getSize();\r
356                 \r
357             this.anchorEl.removeClass(this.anchorCls);\r
358 \r
359             if(this.targetCounter < 2){\r
360                 if(axy[0] < scrollX){\r
361                     if(this.anchorToTarget){\r
362                         this.defaultAlign = 'l-r';\r
363                         if(this.mouseOffset){this.mouseOffset[0] *= -1;}\r
364                     }\r
365                     this.anchor = 'left';\r
366                     return this.getTargetXY();\r
367                 }\r
368                 if(axy[0]+sz.width > dw){\r
369                     if(this.anchorToTarget){\r
370                         this.defaultAlign = 'r-l';\r
371                         if(this.mouseOffset){this.mouseOffset[0] *= -1;}\r
372                     }\r
373                     this.anchor = 'right';\r
374                     return this.getTargetXY();\r
375                 }\r
376                 if(axy[1] < scrollY){\r
377                     if(this.anchorToTarget){\r
378                         this.defaultAlign = 't-b';\r
379                         if(this.mouseOffset){this.mouseOffset[1] *= -1;}\r
380                     }\r
381                     this.anchor = 'top';\r
382                     return this.getTargetXY();\r
383                 }\r
384                 if(axy[1]+sz.height > dh){\r
385                     if(this.anchorToTarget){\r
386                         this.defaultAlign = 'b-t';\r
387                         if(this.mouseOffset){this.mouseOffset[1] *= -1;}\r
388                     }\r
389                     this.anchor = 'bottom';\r
390                     return this.getTargetXY();\r
391                 }\r
392             }\r
393 \r
394             this.anchorCls = 'x-tip-anchor-'+this.getAnchorPosition();\r
395             this.anchorEl.addClass(this.anchorCls);\r
396             this.targetCounter = 0;\r
397             return axy;\r
398         }else{\r
399             var mouseOffset = this.getMouseOffset();\r
400             return [this.targetXY[0]+mouseOffset[0], this.targetXY[1]+mouseOffset[1]];\r
401         }\r
402     },\r
403 \r
404     getMouseOffset : function(){\r
405         var offset = this.anchor ? [0,0] : [15,18];\r
406         if(this.mouseOffset){\r
407             offset[0] += this.mouseOffset[0];\r
408             offset[1] += this.mouseOffset[1];\r
409         }\r
410         return offset;\r
411     },\r
412 \r
413     // private\r
414     getAnchorPosition : function(){\r
415         if(this.anchor){\r
416             this.tipAnchor = this.anchor.charAt(0);\r
417         }else{\r
418             var m = this.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/);\r
419             if(!m){\r
420                throw 'AnchorTip.defaultAlign is invalid';\r
421             }\r
422             this.tipAnchor = m[1].charAt(0);\r
423         }\r
424 \r
425         switch(this.tipAnchor){\r
426             case 't': return 'top';\r
427             case 'b': return 'bottom';\r
428             case 'r': return 'right';\r
429         }\r
430         return 'left';\r
431     },\r
432 \r
433     // private\r
434     getAnchorAlign : function(){\r
435         switch(this.anchor){\r
436             case 'top'  : return 'tl-bl';\r
437             case 'left' : return 'tl-tr';\r
438             case 'right': return 'tr-tl';\r
439             default     : return 'bl-tl';\r
440         }\r
441     },\r
442 \r
443     // private\r
444     getOffsets : function(){\r
445         var offsets, \r
446             ap = this.getAnchorPosition().charAt(0);\r
447         if(this.anchorToTarget && !this.trackMouse){\r
448             switch(ap){\r
449                 case 't':\r
450                     offsets = [0, 9];\r
451                     break;\r
452                 case 'b':\r
453                     offsets = [0, -13];\r
454                     break;\r
455                 case 'r':\r
456                     offsets = [-13, 0];\r
457                     break;\r
458                 default:\r
459                     offsets = [9, 0];\r
460                     break;\r
461             }\r
462         }else{\r
463             switch(ap){\r
464                 case 't':\r
465                     offsets = [-15-this.anchorOffset, 30];\r
466                     break;\r
467                 case 'b':\r
468                     offsets = [-19-this.anchorOffset, -13-this.el.dom.offsetHeight];\r
469                     break;\r
470                 case 'r':\r
471                     offsets = [-15-this.el.dom.offsetWidth, -13-this.anchorOffset];\r
472                     break;\r
473                 default:\r
474                     offsets = [25, -13-this.anchorOffset];\r
475                     break;\r
476             }\r
477         }\r
478         var mouseOffset = this.getMouseOffset();\r
479         offsets[0] += mouseOffset[0];\r
480         offsets[1] += mouseOffset[1];\r
481 \r
482         return offsets;\r
483     },\r
484 \r
485     // private\r
486     onTargetOver : function(e){\r
487         if(this.disabled || e.within(this.target.dom, true)){\r
488             return;\r
489         }\r
490         var t = e.getTarget(this.delegate);\r
491         if (t) {\r
492             this.triggerElement = t;\r
493             this.clearTimer('hide');\r
494             this.targetXY = e.getXY();\r
495             this.delayShow();\r
496         }\r
497     },\r
498 \r
499     // private\r
500     delayShow : function(){\r
501         if(this.hidden && !this.showTimer){\r
502             if(this.lastActive.getElapsed() < this.quickShowInterval){\r
503                 this.show();\r
504             }else{\r
505                 this.showTimer = this.show.defer(this.showDelay, this);\r
506             }\r
507         }else if(!this.hidden && this.autoHide !== false){\r
508             this.show();\r
509         }\r
510     },\r
511 \r
512     // private\r
513     onTargetOut : function(e){\r
514         if(this.disabled || e.within(this.target.dom, true)){\r
515             return;\r
516         }\r
517         this.clearTimer('show');\r
518         if(this.autoHide !== false){\r
519             this.delayHide();\r
520         }\r
521     },\r
522 \r
523     // private\r
524     delayHide : function(){\r
525         if(!this.hidden && !this.hideTimer){\r
526             this.hideTimer = this.hide.defer(this.hideDelay, this);\r
527         }\r
528     },\r
529 \r
530     /**\r
531      * Hides this tooltip if visible.\r
532      */\r
533     hide: function(){\r
534         this.clearTimer('dismiss');\r
535         this.lastActive = new Date();\r
536         if(this.anchorEl){\r
537             this.anchorEl.hide();\r
538         }\r
539         Ext.ToolTip.superclass.hide.call(this);\r
540         delete this.triggerElement;\r
541     },\r
542 \r
543     /**\r
544      * Shows this tooltip at the current event target XY position.\r
545      */\r
546     show : function(){\r
547         if(this.anchor){\r
548             // pre-show it off screen so that the el will have dimensions\r
549             // for positioning calcs when getting xy next\r
550             this.showAt([-1000,-1000]);\r
551             this.origConstrainPosition = this.constrainPosition;\r
552             this.constrainPosition = false;\r
553             this.anchor = this.origAnchor;\r
554         }\r
555         this.showAt(this.getTargetXY());\r
556 \r
557         if(this.anchor){\r
558             this.syncAnchor();\r
559             this.anchorEl.show();\r
560             this.constrainPosition = this.origConstrainPosition;\r
561         }else{\r
562             this.anchorEl.hide();\r
563         }\r
564     },\r
565 \r
566     // inherit docs\r
567     showAt : function(xy){\r
568         this.lastActive = new Date();\r
569         this.clearTimers();\r
570         Ext.ToolTip.superclass.showAt.call(this, xy);\r
571         if(this.dismissDelay && this.autoHide !== false){\r
572             this.dismissTimer = this.hide.defer(this.dismissDelay, this);\r
573         }\r
574         if(this.anchor && !this.anchorEl.isVisible()){\r
575             this.syncAnchor();\r
576             this.anchorEl.show();\r
577         }\r
578     },\r
579 \r
580     // private\r
581     syncAnchor : function(){\r
582         var anchorPos, targetPos, offset;\r
583         switch(this.tipAnchor.charAt(0)){\r
584             case 't':\r
585                 anchorPos = 'b';\r
586                 targetPos = 'tl';\r
587                 offset = [20+this.anchorOffset, 2];\r
588                 break;\r
589             case 'r':\r
590                 anchorPos = 'l';\r
591                 targetPos = 'tr';\r
592                 offset = [-2, 11+this.anchorOffset];\r
593                 break;\r
594             case 'b':\r
595                 anchorPos = 't';\r
596                 targetPos = 'bl';\r
597                 offset = [20+this.anchorOffset, -2];\r
598                 break;\r
599             default:\r
600                 anchorPos = 'r';\r
601                 targetPos = 'tl';\r
602                 offset = [2, 11+this.anchorOffset];\r
603                 break;\r
604         }\r
605         this.anchorEl.alignTo(this.el, anchorPos+'-'+targetPos, offset);\r
606     },\r
607 \r
608     // private\r
609     setPagePosition : function(x, y){\r
610         Ext.ToolTip.superclass.setPagePosition.call(this, x, y);\r
611         if(this.anchor){\r
612             this.syncAnchor();\r
613         }\r
614     },\r
615 \r
616     // private\r
617     clearTimer : function(name){\r
618         name = name + 'Timer';\r
619         clearTimeout(this[name]);\r
620         delete this[name];\r
621     },\r
622 \r
623     // private\r
624     clearTimers : function(){\r
625         this.clearTimer('show');\r
626         this.clearTimer('dismiss');\r
627         this.clearTimer('hide');\r
628     },\r
629 \r
630     // private\r
631     onShow : function(){\r
632         Ext.ToolTip.superclass.onShow.call(this);\r
633         Ext.getDoc().on('mousedown', this.onDocMouseDown, this);\r
634     },\r
635 \r
636     // private\r
637     onHide : function(){\r
638         Ext.ToolTip.superclass.onHide.call(this);\r
639         Ext.getDoc().un('mousedown', this.onDocMouseDown, this);\r
640     },\r
641 \r
642     // private\r
643     onDocMouseDown : function(e){\r
644         if(this.autoHide !== true && !this.closable && !e.within(this.el.dom)){\r
645             this.disable();\r
646             this.enable.defer(100, this);\r
647         }\r
648     },\r
649 \r
650     // private\r
651     onDisable : function(){\r
652         this.clearTimers();\r
653         this.hide();\r
654     },\r
655 \r
656     // private\r
657     adjustPosition : function(x, y){\r
658         if(this.contstrainPosition){\r
659             var ay = this.targetXY[1], h = this.getSize().height;\r
660             if(y <= ay && (y+h) >= ay){\r
661                 y = ay-h-5;\r
662             }\r
663         }\r
664         return {x : x, y: y};\r
665     },\r
666     \r
667     beforeDestroy : function(){\r
668         this.clearTimers();\r
669         Ext.destroy(this.anchorEl);\r
670         delete this.anchorEl;\r
671         delete this.target;\r
672         delete this.anchorTarget;\r
673         delete this.triggerElement;\r
674         Ext.ToolTip.superclass.beforeDestroy.call(this);    \r
675     },\r
676 \r
677     // private\r
678     onDestroy : function(){\r
679         Ext.getDoc().un('mousedown', this.onDocMouseDown, this);\r
680         Ext.ToolTip.superclass.onDestroy.call(this);\r
681     }\r
682 });\r
683 \r
684 Ext.reg('tooltip', Ext.ToolTip);/**\r
685  * @class Ext.QuickTip\r
686  * @extends Ext.ToolTip\r
687  * @xtype quicktip\r
688  * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global\r
689  * {@link Ext.QuickTips} instance.  See the QuickTips class header for additional usage details and examples.\r
690  * @constructor\r
691  * Create a new Tip\r
692  * @param {Object} config The configuration options\r
693  */\r
694 Ext.QuickTip = Ext.extend(Ext.ToolTip, {\r
695     /**\r
696      * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to associate with this quicktip (defaults to the document).\r
697      */\r
698     /**\r
699      * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available (defaults to false).\r
700      */\r
701     interceptTitles : false,\r
702 \r
703     // private\r
704     tagConfig : {\r
705         namespace : "ext",\r
706         attribute : "qtip",\r
707         width : "qwidth",\r
708         target : "target",\r
709         title : "qtitle",\r
710         hide : "hide",\r
711         cls : "qclass",\r
712         align : "qalign",\r
713         anchor : "anchor"\r
714     },\r
715 \r
716     // private\r
717     initComponent : function(){\r
718         this.target = this.target || Ext.getDoc();\r
719         this.targets = this.targets || {};\r
720         Ext.QuickTip.superclass.initComponent.call(this);\r
721     },\r
722 \r
723     /**\r
724      * Configures a new quick tip instance and assigns it to a target element.  The following config values are\r
725      * supported (for example usage, see the {@link Ext.QuickTips} class header):\r
726      * <div class="mdetail-params"><ul>\r
727      * <li>autoHide</li>\r
728      * <li>cls</li>\r
729      * <li>dismissDelay (overrides the singleton value)</li>\r
730      * <li>target (required)</li>\r
731      * <li>text (required)</li>\r
732      * <li>title</li>\r
733      * <li>width</li></ul></div>\r
734      * @param {Object} config The config object\r
735      */\r
736     register : function(config){\r
737         var cs = Ext.isArray(config) ? config : arguments;\r
738         for(var i = 0, len = cs.length; i < len; i++){\r
739             var c = cs[i];\r
740             var target = c.target;\r
741             if(target){\r
742                 if(Ext.isArray(target)){\r
743                     for(var j = 0, jlen = target.length; j < jlen; j++){\r
744                         this.targets[Ext.id(target[j])] = c;\r
745                     }\r
746                 } else{\r
747                     this.targets[Ext.id(target)] = c;\r
748                 }\r
749             }\r
750         }\r
751     },\r
752 \r
753     /**\r
754      * Removes this quick tip from its element and destroys it.\r
755      * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.\r
756      */\r
757     unregister : function(el){\r
758         delete this.targets[Ext.id(el)];\r
759     },\r
760     \r
761     /**\r
762      * Hides a visible tip or cancels an impending show for a particular element.\r
763      * @param {String/HTMLElement/Element} el The element that is the target of the tip.\r
764      */\r
765     cancelShow: function(el){\r
766         var at = this.activeTarget;\r
767         el = Ext.get(el).dom;\r
768         if(this.isVisible()){\r
769             if(at && at.el == el){\r
770                 this.hide();\r
771             }\r
772         }else if(at && at.el == el){\r
773             this.clearTimer('show');\r
774         }\r
775     },\r
776     \r
777     getTipCfg: function(e) {\r
778         var t = e.getTarget(), \r
779             ttp, \r
780             cfg;\r
781         if(this.interceptTitles && t.title && Ext.isString(t.title)){\r
782             ttp = t.title;\r
783             t.qtip = ttp;\r
784             t.removeAttribute("title");\r
785             e.preventDefault();\r
786         }else{\r
787             cfg = this.tagConfig;\r
788             ttp = t.qtip || Ext.fly(t).getAttribute(cfg.attribute, cfg.namespace);\r
789         }\r
790         return ttp;\r
791     },\r
792 \r
793     // private\r
794     onTargetOver : function(e){\r
795         if(this.disabled){\r
796             return;\r
797         }\r
798         this.targetXY = e.getXY();\r
799         var t = e.getTarget();\r
800         if(!t || t.nodeType !== 1 || t == document || t == document.body){\r
801             return;\r
802         }\r
803         if(this.activeTarget && ((t == this.activeTarget.el) || Ext.fly(this.activeTarget.el).contains(t))){\r
804             this.clearTimer('hide');\r
805             this.show();\r
806             return;\r
807         }\r
808         if(t && this.targets[t.id]){\r
809             this.activeTarget = this.targets[t.id];\r
810             this.activeTarget.el = t;\r
811             this.anchor = this.activeTarget.anchor;\r
812             if(this.anchor){\r
813                 this.anchorTarget = t;\r
814             }\r
815             this.delayShow();\r
816             return;\r
817         }\r
818         var ttp, et = Ext.fly(t), cfg = this.tagConfig, ns = cfg.namespace;\r
819         if(ttp = this.getTipCfg(e)){\r
820             var autoHide = et.getAttribute(cfg.hide, ns);\r
821             this.activeTarget = {\r
822                 el: t,\r
823                 text: ttp,\r
824                 width: et.getAttribute(cfg.width, ns),\r
825                 autoHide: autoHide != "user" && autoHide !== 'false',\r
826                 title: et.getAttribute(cfg.title, ns),\r
827                 cls: et.getAttribute(cfg.cls, ns),\r
828                 align: et.getAttribute(cfg.align, ns)\r
829                 \r
830             };\r
831             this.anchor = et.getAttribute(cfg.anchor, ns);\r
832             if(this.anchor){\r
833                 this.anchorTarget = t;\r
834             }\r
835             this.delayShow();\r
836         }\r
837     },\r
838 \r
839     // private\r
840     onTargetOut : function(e){\r
841 \r
842         // If moving within the current target, and it does not have a new tip, ignore the mouseout\r
843         if (this.activeTarget && e.within(this.activeTarget.el) && !this.getTipCfg(e)) {\r
844             return;\r
845         }\r
846 \r
847         this.clearTimer('show');\r
848         if(this.autoHide !== false){\r
849             this.delayHide();\r
850         }\r
851     },\r
852 \r
853     // inherit docs\r
854     showAt : function(xy){\r
855         var t = this.activeTarget;\r
856         if(t){\r
857             if(!this.rendered){\r
858                 this.render(Ext.getBody());\r
859                 this.activeTarget = t;\r
860             }\r
861             if(t.width){\r
862                 this.setWidth(t.width);\r
863                 this.body.setWidth(this.adjustBodyWidth(t.width - this.getFrameWidth()));\r
864                 this.measureWidth = false;\r
865             } else{\r
866                 this.measureWidth = true;\r
867             }\r
868             this.setTitle(t.title || '');\r
869             this.body.update(t.text);\r
870             this.autoHide = t.autoHide;\r
871             this.dismissDelay = t.dismissDelay || this.dismissDelay;\r
872             if(this.lastCls){\r
873                 this.el.removeClass(this.lastCls);\r
874                 delete this.lastCls;\r
875             }\r
876             if(t.cls){\r
877                 this.el.addClass(t.cls);\r
878                 this.lastCls = t.cls;\r
879             }\r
880             if(this.anchor){\r
881                 this.constrainPosition = false;\r
882             }else if(t.align){ // TODO: this doesn't seem to work consistently\r
883                 xy = this.el.getAlignToXY(t.el, t.align);\r
884                 this.constrainPosition = false;\r
885             }else{\r
886                 this.constrainPosition = true;\r
887             }\r
888         }\r
889         Ext.QuickTip.superclass.showAt.call(this, xy);\r
890     },\r
891 \r
892     // inherit docs\r
893     hide: function(){\r
894         delete this.activeTarget;\r
895         Ext.QuickTip.superclass.hide.call(this);\r
896     }\r
897 });\r
898 Ext.reg('quicktip', Ext.QuickTip);/**\r
899  * @class Ext.QuickTips\r
900  * <p>Provides attractive and customizable tooltips for any element. The QuickTips\r
901  * singleton is used to configure and manage tooltips globally for multiple elements\r
902  * in a generic manner.  To create individual tooltips with maximum customizability,\r
903  * you should consider either {@link Ext.Tip} or {@link Ext.ToolTip}.</p>\r
904  * <p>Quicktips can be configured via tag attributes directly in markup, or by\r
905  * registering quick tips programmatically via the {@link #register} method.</p>\r
906  * <p>The singleton's instance of {@link Ext.QuickTip} is available via\r
907  * {@link #getQuickTip}, and supports all the methods, and all the all the\r
908  * configuration properties of Ext.QuickTip. These settings will apply to all\r
909  * tooltips shown by the singleton.</p>\r
910  * <p>Below is the summary of the configuration properties which can be used.\r
911  * For detailed descriptions see {@link #getQuickTip}</p>\r
912  * <p><b>QuickTips singleton configs (all are optional)</b></p>\r
913  * <div class="mdetail-params"><ul><li>dismissDelay</li>\r
914  * <li>hideDelay</li>\r
915  * <li>maxWidth</li>\r
916  * <li>minWidth</li>\r
917  * <li>showDelay</li>\r
918  * <li>trackMouse</li></ul></div>\r
919  * <p><b>Target element configs (optional unless otherwise noted)</b></p>\r
920  * <div class="mdetail-params"><ul><li>autoHide</li>\r
921  * <li>cls</li>\r
922  * <li>dismissDelay (overrides singleton value)</li>\r
923  * <li>target (required)</li>\r
924  * <li>text (required)</li>\r
925  * <li>title</li>\r
926  * <li>width</li></ul></div>\r
927  * <p>Here is an example showing how some of these config options could be used:</p>\r
928  * <pre><code>\r
929 // Init the singleton.  Any tag-based quick tips will start working.\r
930 Ext.QuickTips.init();\r
931 \r
932 // Apply a set of config properties to the singleton\r
933 Ext.apply(Ext.QuickTips.getQuickTip(), {\r
934     maxWidth: 200,\r
935     minWidth: 100,\r
936     showDelay: 50,\r
937     trackMouse: true\r
938 });\r
939 \r
940 // Manually register a quick tip for a specific element\r
941 Ext.QuickTips.register({\r
942     target: 'my-div',\r
943     title: 'My Tooltip',\r
944     text: 'This tooltip was added in code',\r
945     width: 100,\r
946     dismissDelay: 20\r
947 });\r
948 </code></pre>\r
949  * <p>To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with\r
950  * the <b>ext:</b> namespace.  The HTML element itself is automatically set as the quick tip target. Here is the summary\r
951  * of supported attributes (optional unless otherwise noted):</p>\r
952  * <ul><li><b>hide</b>: Specifying "user" is equivalent to setting autoHide = false.  Any other value will be the\r
953  * same as autoHide = true.</li>\r
954  * <li><b>qclass</b>: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config).</li>\r
955  * <li><b>qtip (required)</b>: The quick tip text (equivalent to the 'text' target element config).</li>\r
956  * <li><b>qtitle</b>: The quick tip title (equivalent to the 'title' target element config).</li>\r
957  * <li><b>qwidth</b>: The quick tip width (equivalent to the 'width' target element config).</li></ul>\r
958  * <p>Here is an example of configuring an HTML element to display a tooltip from markup:</p>\r
959  * <pre><code>\r
960 // Add a quick tip to an HTML button\r
961 &lt;input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100"\r
962      ext:qtip="This is a quick tip from markup!">&lt;/input>\r
963 </code></pre>\r
964  * @singleton\r
965  */\r
966 Ext.QuickTips = function(){\r
967     var tip, locks = [];\r
968     return {\r
969         /**\r
970          * Initialize the global QuickTips instance and prepare any quick tips.\r
971          * @param {Boolean} autoRender True to render the QuickTips container immediately to preload images. (Defaults to true) \r
972          */\r
973         init : function(autoRender){\r
974             if(!tip){\r
975                 if(!Ext.isReady){\r
976                     Ext.onReady(function(){\r
977                         Ext.QuickTips.init(autoRender);\r
978                     });\r
979                     return;\r
980                 }\r
981                 tip = new Ext.QuickTip({elements:'header,body'});\r
982                 if(autoRender !== false){\r
983                     tip.render(Ext.getBody());\r
984                 }\r
985             }\r
986         },\r
987 \r
988         /**\r
989          * Enable quick tips globally.\r
990          */\r
991         enable : function(){\r
992             if(tip){\r
993                 locks.pop();\r
994                 if(locks.length < 1){\r
995                     tip.enable();\r
996                 }\r
997             }\r
998         },\r
999 \r
1000         /**\r
1001          * Disable quick tips globally.\r
1002          */\r
1003         disable : function(){\r
1004             if(tip){\r
1005                 tip.disable();\r
1006             }\r
1007             locks.push(1);\r
1008         },\r
1009 \r
1010         /**\r
1011          * Returns true if quick tips are enabled, else false.\r
1012          * @return {Boolean}\r
1013          */\r
1014         isEnabled : function(){\r
1015             return tip !== undefined && !tip.disabled;\r
1016         },\r
1017 \r
1018         /**\r
1019          * Gets the global QuickTips instance.\r
1020          */\r
1021         getQuickTip : function(){\r
1022             return tip;\r
1023         },\r
1024 \r
1025         /**\r
1026          * Configures a new quick tip instance and assigns it to a target element.  See\r
1027          * {@link Ext.QuickTip#register} for details.\r
1028          * @param {Object} config The config object\r
1029          */\r
1030         register : function(){\r
1031             tip.register.apply(tip, arguments);\r
1032         },\r
1033 \r
1034         /**\r
1035          * Removes any registered quick tip from the target element and destroys it.\r
1036          * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.\r
1037          */\r
1038         unregister : function(){\r
1039             tip.unregister.apply(tip, arguments);\r
1040         },\r
1041 \r
1042         /**\r
1043          * Alias of {@link #register}.\r
1044          * @param {Object} config The config object\r
1045          */\r
1046         tips :function(){\r
1047             tip.register.apply(tip, arguments);\r
1048         }\r
1049     }\r
1050 }();