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