Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / QuickTip.html
index 10dfae7..4fca195 100644 (file)
+<!DOCTYPE html>
 <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>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
 </head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-tip-QuickTip'>/**
+</span> * @class Ext.tip.QuickTip
+ * @extends Ext.tip.ToolTip
+ * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global
+ * {@link Ext.tip.QuickTipManager} instance.  See the QuickTipManager documentation for additional usage details and examples.
+ * @xtype quicktip
  */
-<div id="cls-Ext.QuickTip"></div>/**\r
- * @class Ext.QuickTip\r
- * @extends Ext.ToolTip\r
- * @xtype quicktip\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
-    getTipCfg: function(e) {\r
-        var t = e.getTarget(), \r
-            ttp, \r
-            cfg;\r
-        if(this.interceptTitles && t.title){\r
-            ttp = t.title;\r
-            t.qtip = ttp;\r
-            t.removeAttribute("title");\r
-            e.preventDefault();\r
-        }else{\r
-            cfg = this.tagConfig;\r
-            ttp = t.qtip || Ext.fly(t).getAttribute(cfg.attribute, cfg.namespace);\r
-        }\r
-        return ttp;\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) || Ext.fly(this.activeTarget.el).contains(t))){\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
-        var ttp, et = Ext.fly(t), cfg = this.tagConfig, ns = cfg.namespace;\r
-        if(ttp = this.getTipCfg(e)){\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
-\r
-        // If moving within the current target, and it does not have a new tip, ignore the mouseout\r
-        if (this.activeTarget && e.within(this.activeTarget.el) && !this.getTipCfg(e)) {\r
-            return;\r
-        }\r
-\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
-});\r
-Ext.reg('quicktip', Ext.QuickTip);</pre>
+Ext.define('Ext.tip.QuickTip', {
+    extend: 'Ext.tip.ToolTip',
+    alternateClassName: 'Ext.QuickTip',
+<span id='Ext-tip-QuickTip-cfg-target'>    /**
+</span>     * @cfg {String/HTMLElement/Ext.Element} target The target HTMLElement, Ext.Element or id to associate with this Quicktip (defaults to the document).
+     */
+<span id='Ext-tip-QuickTip-cfg-interceptTitles'>    /**
+</span>     * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available.
+     */
+    interceptTitles : false,
+
+    // Force creation of header Component
+    title: '&amp;#160;',
+
+    // private
+    tagConfig : {
+        namespace : &quot;data-&quot;,
+        attribute : &quot;qtip&quot;,
+        width : &quot;qwidth&quot;,
+        target : &quot;target&quot;,
+        title : &quot;qtitle&quot;,
+        hide : &quot;hide&quot;,
+        cls : &quot;qclass&quot;,
+        align : &quot;qalign&quot;,
+        anchor : &quot;anchor&quot;
+    },
+
+    // private
+    initComponent : function(){
+        var me = this;
+
+        me.target = me.target || Ext.getDoc();
+        me.targets = me.targets || {};
+        me.callParent();
+    },
+
+<span id='Ext-tip-QuickTip-method-register'>    /**
+</span>     * 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.tip.QuickTipManager} class header):
+     * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
+     * &lt;li&gt;autoHide&lt;/li&gt;
+     * &lt;li&gt;cls&lt;/li&gt;
+     * &lt;li&gt;dismissDelay (overrides the singleton value)&lt;/li&gt;
+     * &lt;li&gt;target (required)&lt;/li&gt;
+     * &lt;li&gt;text (required)&lt;/li&gt;
+     * &lt;li&gt;title&lt;/li&gt;
+     * &lt;li&gt;width&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
+     * @param {Object} config The config object
+     */
+    register : function(config){
+        var configs = Ext.isArray(config) ? config : arguments,
+            i = 0,
+            len = configs.length,
+            target, j, targetLen;
+
+        for (; i &lt; len; i++) {
+            config = configs[i];
+            target = config.target;
+            if (target) {
+                if (Ext.isArray(target)) {
+                    for (j = 0, targetLen = target.length; j &lt; targetLen; j++) {
+                        this.targets[Ext.id(target[j])] = config;
+                    }
+                } else{
+                    this.targets[Ext.id(target)] = config;
+                }
+            }
+        }
+    },
+
+<span id='Ext-tip-QuickTip-method-unregister'>    /**
+</span>     * Removes this quick tip from its element and destroys it.
+     * @param {String/HTMLElement/Ext.Element} el The element from which the quick tip is to be removed or ID of the element.
+     */
+    unregister : function(el){
+        delete this.targets[Ext.id(el)];
+    },
+
+<span id='Ext-tip-QuickTip-method-cancelShow'>    /**
+</span>     * Hides a visible tip or cancels an impending show for a particular element.
+     * @param {String/HTMLElement/Ext.Element} el The element that is the target of the tip or ID of the element.
+     */
+    cancelShow: function(el){
+        var me = this,
+            activeTarget = me.activeTarget;
+
+        el = Ext.get(el).dom;
+        if (me.isVisible()) {
+            if (activeTarget &amp;&amp; activeTarget.el == el) {
+                me.hide();
+            }
+        } else if (activeTarget &amp;&amp; activeTarget.el == el) {
+            me.clearTimer('show');
+        }
+    },
+
+<span id='Ext-tip-QuickTip-method-getTipCfg'>    /**
+</span>     * @private
+     * Reads the tip text from the closest node to the event target which contains the attribute we
+     * are configured to look for. Returns an object containing the text from the attribute, and the target element from
+     * which the text was read.
+     */
+    getTipCfg: function(e) {
+        var t = e.getTarget(),
+            titleText = t.title,
+            cfg;
+
+        if (this.interceptTitles &amp;&amp; titleText &amp;&amp; Ext.isString(titleText)) {
+            t.qtip = titleText;
+            t.removeAttribute(&quot;title&quot;);
+            e.preventDefault();
+            return {
+                text: titleText
+            };
+        }
+        else {
+            cfg = this.tagConfig;
+            t = e.getTarget('[' + cfg.namespace + cfg.attribute + ']');
+            if (t) {
+                return {
+                    target: t,
+                    text: t.getAttribute(cfg.namespace + cfg.attribute)
+                };
+            }
+        }
+    },
+
+    // private
+    onTargetOver : function(e){
+        var me = this,
+            target = e.getTarget(),
+            elTarget,
+            cfg,
+            ns,
+            tipConfig,
+            autoHide;
+
+        if (me.disabled) {
+            return;
+        }
+
+        // TODO - this causes &quot;e&quot; to be recycled in IE6/7 (EXTJSIV-1608) so ToolTip#setTarget
+        // was changed to include freezeEvent. The issue seems to be a nested 'resize' event
+        // that smashed Ext.EventObject.
+        me.targetXY = e.getXY();
+
+        if(!target || target.nodeType !== 1 || target == document || target == document.body){
+            return;
+        }
+
+        if (me.activeTarget &amp;&amp; ((target == me.activeTarget.el) || Ext.fly(me.activeTarget.el).contains(target))) {
+            me.clearTimer('hide');
+            me.show();
+            return;
+        }
+
+        if (target) {
+            Ext.Object.each(me.targets, function(key, value) {
+                var targetEl = Ext.fly(value.target);
+                if (targetEl &amp;&amp; (targetEl.dom === target || targetEl.contains(target))) {
+                    elTarget = targetEl.dom;
+                    return false;
+                }
+            });
+            if (elTarget) {
+                me.activeTarget = me.targets[elTarget.id];
+                me.activeTarget.el = target;
+                me.anchor = me.activeTarget.anchor;
+                if (me.anchor) {
+                    me.anchorTarget = target;
+                }
+                me.delayShow();
+                return;
+            }
+        }
+
+        elTarget = Ext.get(target);
+        cfg = me.tagConfig;
+        ns = cfg.namespace;
+        tipConfig = me.getTipCfg(e);
+
+        if (tipConfig) {
+
+            // getTipCfg may look up the parentNode axis for a tip text attribute and will return the new target node.
+            // Change our target element to match that from which the tip text attribute was read.
+            if (tipConfig.target) {
+                target = tipConfig.target;
+                elTarget = Ext.get(target);
+            }
+            autoHide = elTarget.getAttribute(ns + cfg.hide);
+
+            me.activeTarget = {
+                el: target,
+                text: tipConfig.text,
+                width: +elTarget.getAttribute(ns + cfg.width) || null,
+                autoHide: autoHide != &quot;user&quot; &amp;&amp; autoHide !== 'false',
+                title: elTarget.getAttribute(ns + cfg.title),
+                cls: elTarget.getAttribute(ns + cfg.cls),
+                align: elTarget.getAttribute(ns + cfg.align)
+
+            };
+            me.anchor = elTarget.getAttribute(ns + cfg.anchor);
+            if (me.anchor) {
+                me.anchorTarget = target;
+            }
+            me.delayShow();
+        }
+    },
+
+    // private
+    onTargetOut : function(e){
+        var me = this;
+
+        // If moving within the current target, and it does not have a new tip, ignore the mouseout
+        if (me.activeTarget &amp;&amp; e.within(me.activeTarget.el) &amp;&amp; !me.getTipCfg(e)) {
+            return;
+        }
+
+        me.clearTimer('show');
+        if (me.autoHide !== false) {
+            me.delayHide();
+        }
+    },
+
+    // inherit docs
+    showAt : function(xy){
+        var me = this,
+            target = me.activeTarget;
+
+        if (target) {
+            if (!me.rendered) {
+                me.render(Ext.getBody());
+                me.activeTarget = target;
+            }
+            if (target.title) {
+                me.setTitle(target.title || '');
+                me.header.show();
+            } else {
+                me.header.hide();
+            }
+            me.body.update(target.text);
+            me.autoHide = target.autoHide;
+            me.dismissDelay = target.dismissDelay || me.dismissDelay;
+            if (me.lastCls) {
+                me.el.removeCls(me.lastCls);
+                delete me.lastCls;
+            }
+            if (target.cls) {
+                me.el.addCls(target.cls);
+                me.lastCls = target.cls;
+            }
+
+            me.setWidth(target.width);
+
+            if (me.anchor) {
+                me.constrainPosition = false;
+            } else if (target.align) { // TODO: this doesn't seem to work consistently
+                xy = me.el.getAlignToXY(target.el, target.align);
+                me.constrainPosition = false;
+            }else{
+                me.constrainPosition = true;
+            }
+        }
+        me.callParent([xy]);
+    },
+
+    // inherit docs
+    hide: function(){
+        delete this.activeTarget;
+        this.callParent();
+    }
+});
+</pre>
 </body>
-</html>
\ No newline at end of file
+</html>