Upgrade to ExtJS 3.2.2 - Released 06/02/2010
[extjs.git] / docs / source / QuickTip.html
index 6cd90d3..82e6c46 100644 (file)
-<html>\r
-<head>\r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js"><div id="cls-Ext.QuickTip"></div>/**\r
- * @class Ext.QuickTip\r
- * @extends Ext.ToolTip\r
- * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global\r
- * {@link Ext.QuickTips} instance.  See the QuickTips class header for additional usage details and examples.\r
- * @constructor\r
- * Create a new Tip\r
- * @param {Object} config The configuration options\r
- */\r
-Ext.QuickTip = Ext.extend(Ext.ToolTip, {\r
-    <div id="cfg-Ext.QuickTip-target"></div>/**\r
-     * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to associate with this quicktip (defaults to the document).\r
-     */\r
-    <div id="cfg-Ext.QuickTip-interceptTitles"></div>/**\r
-     * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available (defaults to false).\r
-     */\r
-    interceptTitles : false,\r
-\r
-    // private\r
-    tagConfig : {\r
-        namespace : "ext",\r
-        attribute : "qtip",\r
-        width : "qwidth",\r
-        target : "target",\r
-        title : "qtitle",\r
-        hide : "hide",\r
-        cls : "qclass",\r
-        align : "qalign",\r
-        anchor : "anchor"\r
-    },\r
-\r
-    // private\r
-    initComponent : function(){\r
-        this.target = this.target || Ext.getDoc();\r
-        this.targets = this.targets || {};\r
-        Ext.QuickTip.superclass.initComponent.call(this);\r
-    },\r
-\r
-    <div id="method-Ext.QuickTip-register"></div>/**\r
-     * Configures a new quick tip instance and assigns it to a target element.  The following config values are\r
-     * supported (for example usage, see the {@link Ext.QuickTips} class header):\r
-     * <div class="mdetail-params"><ul>\r
-     * <li>autoHide</li>\r
-     * <li>cls</li>\r
-     * <li>dismissDelay (overrides the singleton value)</li>\r
-     * <li>target (required)</li>\r
-     * <li>text (required)</li>\r
-     * <li>title</li>\r
-     * <li>width</li></ul></div>\r
-     * @param {Object} config The config object\r
-     */\r
-    register : function(config){\r
-        var cs = Ext.isArray(config) ? config : arguments;\r
-        for(var i = 0, len = cs.length; i < len; i++){\r
-            var c = cs[i];\r
-            var target = c.target;\r
-            if(target){\r
-                if(Ext.isArray(target)){\r
-                    for(var j = 0, jlen = target.length; j < jlen; j++){\r
-                        this.targets[Ext.id(target[j])] = c;\r
-                    }\r
-                } else{\r
-                    this.targets[Ext.id(target)] = c;\r
-                }\r
-            }\r
-        }\r
-    },\r
-\r
-    <div id="method-Ext.QuickTip-unregister"></div>/**\r
-     * Removes this quick tip from its element and destroys it.\r
-     * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.\r
-     */\r
-    unregister : function(el){\r
-        delete this.targets[Ext.id(el)];\r
-    },\r
-    \r
-    <div id="method-Ext.QuickTip-cancelShow"></div>/**\r
-     * Hides a visible tip or cancels an impending show for a particular element.\r
-     * @param {String/HTMLElement/Element} el The element that is the target of the tip.\r
-     */\r
-    cancelShow: function(el){\r
-        var at = this.activeTarget;\r
-        el = Ext.get(el).dom;\r
-        if(this.isVisible()){\r
-            if(at && at.el == el){\r
-                this.hide();\r
-            }\r
-        }else if(at && at.el == el){\r
-            this.clearTimer('show');\r
-        }\r
-    },\r
-\r
-    // private\r
-    onTargetOver : function(e){\r
-        if(this.disabled){\r
-            return;\r
-        }\r
-        this.targetXY = e.getXY();\r
-        var t = e.getTarget();\r
-        if(!t || t.nodeType !== 1 || t == document || t == document.body){\r
-            return;\r
-        }\r
-        if(this.activeTarget && t == this.activeTarget.el){\r
-            this.clearTimer('hide');\r
-            this.show();\r
-            return;\r
-        }\r
-        if(t && this.targets[t.id]){\r
-            this.activeTarget = this.targets[t.id];\r
-            this.activeTarget.el = t;\r
-            this.anchor = this.activeTarget.anchor;\r
-            if(this.anchor){\r
-                this.anchorTarget = t;\r
-            }\r
-            this.delayShow();\r
-            return;\r
-        }\r
-        \r
-        var ttp, et = Ext.fly(t), cfg = this.tagConfig;\r
-        var ns = cfg.namespace;\r
-        if(this.interceptTitles && t.title){\r
-            ttp = t.title;\r
-            t.qtip = ttp;\r
-            t.removeAttribute("title");\r
-            e.preventDefault();\r
-        } else{\r
-            ttp = t.qtip || et.getAttribute(cfg.attribute, ns);\r
-        }\r
-        if(ttp){\r
-            var autoHide = et.getAttribute(cfg.hide, ns);\r
-            this.activeTarget = {\r
-                el: t,\r
-                text: ttp,\r
-                width: et.getAttribute(cfg.width, ns),\r
-                autoHide: autoHide != "user" && autoHide !== 'false',\r
-                title: et.getAttribute(cfg.title, ns),\r
-                cls: et.getAttribute(cfg.cls, ns),\r
-                align: et.getAttribute(cfg.align, ns)\r
-                \r
-            };\r
-            this.anchor = et.getAttribute(cfg.anchor, ns);\r
-            if(this.anchor){\r
-                this.anchorTarget = t;\r
-            }\r
-            this.delayShow();\r
-        }\r
-    },\r
-\r
-    // private\r
-    onTargetOut : function(e){\r
-        this.clearTimer('show');\r
-        if(this.autoHide !== false){\r
-            this.delayHide();\r
-        }\r
-    },\r
-\r
-    // inherit docs\r
-    showAt : function(xy){\r
-        var t = this.activeTarget;\r
-        if(t){\r
-            if(!this.rendered){\r
-                this.render(Ext.getBody());\r
-                this.activeTarget = t;\r
-            }\r
-            if(t.width){\r
-                this.setWidth(t.width);\r
-                this.body.setWidth(this.adjustBodyWidth(t.width - this.getFrameWidth()));\r
-                this.measureWidth = false;\r
-            } else{\r
-                this.measureWidth = true;\r
-            }\r
-            this.setTitle(t.title || '');\r
-            this.body.update(t.text);\r
-            this.autoHide = t.autoHide;\r
-            this.dismissDelay = t.dismissDelay || this.dismissDelay;\r
-            if(this.lastCls){\r
-                this.el.removeClass(this.lastCls);\r
-                delete this.lastCls;\r
-            }\r
-            if(t.cls){\r
-                this.el.addClass(t.cls);\r
-                this.lastCls = t.cls;\r
-            }\r
-            if(this.anchor){\r
-                this.constrainPosition = false;\r
-            }else if(t.align){ // TODO: this doesn't seem to work consistently\r
-                xy = this.el.getAlignToXY(t.el, t.align);\r
-                this.constrainPosition = false;\r
-            }else{\r
-                this.constrainPosition = true;\r
-            }\r
-        }\r
-        Ext.QuickTip.superclass.showAt.call(this, xy);\r
-    },\r
-\r
-    // inherit docs\r
-    hide: function(){\r
-        delete this.activeTarget;\r
-        Ext.QuickTip.superclass.hide.call(this);\r
-    }\r
-});</pre>    \r
-</body>\r
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <title>The source code</title>
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.2.2
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+<div id="cls-Ext.QuickTip"></div>/**
+ * @class Ext.QuickTip
+ * @extends Ext.ToolTip
+ * @xtype quicktip
+ * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global
+ * {@link Ext.QuickTips} instance.  See the QuickTips class header for additional usage details and examples.
+ * @constructor
+ * Create a new Tip
+ * @param {Object} config The configuration options
+ */
+Ext.QuickTip = Ext.extend(Ext.ToolTip, {
+    <div id="cfg-Ext.QuickTip-target"></div>/**
+     * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to associate with this quicktip (defaults to the document).
+     */
+    <div id="cfg-Ext.QuickTip-interceptTitles"></div>/**
+     * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available (defaults to false).
+     */
+    interceptTitles : false,
+
+    // private
+    tagConfig : {
+        namespace : "ext",
+        attribute : "qtip",
+        width : "qwidth",
+        target : "target",
+        title : "qtitle",
+        hide : "hide",
+        cls : "qclass",
+        align : "qalign",
+        anchor : "anchor"
+    },
+
+    // private
+    initComponent : function(){
+        this.target = this.target || Ext.getDoc();
+        this.targets = this.targets || {};
+        Ext.QuickTip.superclass.initComponent.call(this);
+    },
+
+    <div id="method-Ext.QuickTip-register"></div>/**
+     * Configures a new quick tip instance and assigns it to a target element.  The following config values are
+     * supported (for example usage, see the {@link Ext.QuickTips} class header):
+     * <div class="mdetail-params"><ul>
+     * <li>autoHide</li>
+     * <li>cls</li>
+     * <li>dismissDelay (overrides the singleton value)</li>
+     * <li>target (required)</li>
+     * <li>text (required)</li>
+     * <li>title</li>
+     * <li>width</li></ul></div>
+     * @param {Object} config The config object
+     */
+    register : function(config){
+        var cs = Ext.isArray(config) ? config : arguments;
+        for(var i = 0, len = cs.length; i < len; i++){
+            var c = cs[i];
+            var target = c.target;
+            if(target){
+                if(Ext.isArray(target)){
+                    for(var j = 0, jlen = target.length; j < jlen; j++){
+                        this.targets[Ext.id(target[j])] = c;
+                    }
+                } else{
+                    this.targets[Ext.id(target)] = c;
+                }
+            }
+        }
+    },
+
+    <div id="method-Ext.QuickTip-unregister"></div>/**
+     * Removes this quick tip from its element and destroys it.
+     * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
+     */
+    unregister : function(el){
+        delete this.targets[Ext.id(el)];
+    },
+    
+    <div id="method-Ext.QuickTip-cancelShow"></div>/**
+     * Hides a visible tip or cancels an impending show for a particular element.
+     * @param {String/HTMLElement/Element} el The element that is the target of the tip.
+     */
+    cancelShow: function(el){
+        var at = this.activeTarget;
+        el = Ext.get(el).dom;
+        if(this.isVisible()){
+            if(at && at.el == el){
+                this.hide();
+            }
+        }else if(at && at.el == el){
+            this.clearTimer('show');
+        }
+    },
+    
+    getTipCfg: function(e) {
+        var t = e.getTarget(), 
+            ttp, 
+            cfg;
+        if(this.interceptTitles && t.title && Ext.isString(t.title)){
+            ttp = t.title;
+            t.qtip = ttp;
+            t.removeAttribute("title");
+            e.preventDefault();
+        }else{
+            cfg = this.tagConfig;
+            ttp = t.qtip || Ext.fly(t).getAttribute(cfg.attribute, cfg.namespace);
+        }
+        return ttp;
+    },
+
+    // private
+    onTargetOver : function(e){
+        if(this.disabled){
+            return;
+        }
+        this.targetXY = e.getXY();
+        var t = e.getTarget();
+        if(!t || t.nodeType !== 1 || t == document || t == document.body){
+            return;
+        }
+        if(this.activeTarget && ((t == this.activeTarget.el) || Ext.fly(this.activeTarget.el).contains(t))){
+            this.clearTimer('hide');
+            this.show();
+            return;
+        }
+        if(t && this.targets[t.id]){
+            this.activeTarget = this.targets[t.id];
+            this.activeTarget.el = t;
+            this.anchor = this.activeTarget.anchor;
+            if(this.anchor){
+                this.anchorTarget = t;
+            }
+            this.delayShow();
+            return;
+        }
+        var ttp, et = Ext.fly(t), cfg = this.tagConfig, ns = cfg.namespace;
+        if(ttp = this.getTipCfg(e)){
+            var autoHide = et.getAttribute(cfg.hide, ns);
+            this.activeTarget = {
+                el: t,
+                text: ttp,
+                width: et.getAttribute(cfg.width, ns),
+                autoHide: autoHide != "user" && autoHide !== 'false',
+                title: et.getAttribute(cfg.title, ns),
+                cls: et.getAttribute(cfg.cls, ns),
+                align: et.getAttribute(cfg.align, ns)
+                
+            };
+            this.anchor = et.getAttribute(cfg.anchor, ns);
+            if(this.anchor){
+                this.anchorTarget = t;
+            }
+            this.delayShow();
+        }
+    },
+
+    // private
+    onTargetOut : function(e){
+
+        // If moving within the current target, and it does not have a new tip, ignore the mouseout
+        if (this.activeTarget && e.within(this.activeTarget.el) && !this.getTipCfg(e)) {
+            return;
+        }
+
+        this.clearTimer('show');
+        if(this.autoHide !== false){
+            this.delayHide();
+        }
+    },
+
+    // inherit docs
+    showAt : function(xy){
+        var t = this.activeTarget;
+        if(t){
+            if(!this.rendered){
+                this.render(Ext.getBody());
+                this.activeTarget = t;
+            }
+            if(t.width){
+                this.setWidth(t.width);
+                this.body.setWidth(this.adjustBodyWidth(t.width - this.getFrameWidth()));
+                this.measureWidth = false;
+            } else{
+                this.measureWidth = true;
+            }
+            this.setTitle(t.title || '');
+            this.body.update(t.text);
+            this.autoHide = t.autoHide;
+            this.dismissDelay = t.dismissDelay || this.dismissDelay;
+            if(this.lastCls){
+                this.el.removeClass(this.lastCls);
+                delete this.lastCls;
+            }
+            if(t.cls){
+                this.el.addClass(t.cls);
+                this.lastCls = t.cls;
+            }
+            if(this.anchor){
+                this.constrainPosition = false;
+            }else if(t.align){ // TODO: this doesn't seem to work consistently
+                xy = this.el.getAlignToXY(t.el, t.align);
+                this.constrainPosition = false;
+            }else{
+                this.constrainPosition = true;
+            }
+        }
+        Ext.QuickTip.superclass.showAt.call(this, xy);
+    },
+
+    // inherit docs
+    hide: function(){
+        delete this.activeTarget;
+        Ext.QuickTip.superclass.hide.call(this);
+    }
+});
+Ext.reg('quicktip', Ext.QuickTip);</pre>    
+</body>
 </html>
\ No newline at end of file