Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / pkgs / pkg-tips-debug.js
index 538bd45..f9bc827 100644 (file)
@@ -1,5 +1,5 @@
 /*!
- * Ext JS Library 3.0.0
+ * Ext JS Library 3.0.3
  * Copyright(c) 2006-2009 Ext JS, LLC
  * licensing@extjs.com
  * http://www.extjs.com/license
@@ -7,6 +7,7 @@
 /**\r
  * @class Ext.Tip\r
  * @extends Ext.Panel\r
+ * @xtype tip\r
  * This is the base class for {@link Ext.QuickTip} and {@link Ext.Tooltip} that provides the basic layout and\r
  * positioning that all tip-based classes require. This class can be used directly for simple, statically-positioned\r
  * tips that are displayed programmatically, or it can be extended to provide custom tip implementations.\r
@@ -135,6 +136,8 @@ tip.showBy('my-el', 'tl-tr');
     }\r
 });\r
 \r
+Ext.reg('tip', Ext.Tip);\r
+\r
 // private - custom Tip DD implementation\r
 Ext.Tip.DD = function(tip, config){\r
     Ext.apply(this, config);\r
@@ -158,69 +161,85 @@ Ext.extend(Ext.Tip.DD, Ext.dd.DD, {
  * @class Ext.ToolTip\r
  * @extends Ext.Tip\r
  * A standard tooltip implementation for providing additional information when hovering over a target element.\r
+ * @xtype tooltip\r
  * @constructor\r
  * Create a new Tooltip\r
  * @param {Object} config The configuration options\r
  */\r
 Ext.ToolTip = Ext.extend(Ext.Tip, {\r
     /**\r
-     * When a Tooltip is configured with the {@link #delegate} option to cause selected child elements of the {@link #target}\r
-     * Element to each trigger a seperate show event, this property is set to the DOM element which triggered the show.\r
+     * When a Tooltip is configured with the <code>{@link #delegate}</code>\r
+     * option to cause selected child elements of the <code>{@link #target}</code>\r
+     * Element to each trigger a seperate show event, this property is set to\r
+     * the DOM element which triggered the show.\r
      * @type DOMElement\r
      * @property triggerElement\r
      */\r
     /**\r
-     * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor for mouseover events to trigger\r
-     * showing this ToolTip.\r
+     * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor\r
+     * for mouseover events to trigger showing this ToolTip.\r
      */\r
     /**\r
-     * @cfg {Boolean} autoHide True to automatically hide the tooltip after the mouse exits the target element\r
-     * or after the {@link #dismissDelay} has expired if set (defaults to true).  If {@link closable} = true a close\r
-     * tool button will be rendered into the tooltip header.\r
+     * @cfg {Boolean} autoHide True to automatically hide the tooltip after the\r
+     * mouse exits the target element or after the <code>{@link #dismissDelay}</code>\r
+     * has expired if set (defaults to true).  If <code>{@link closable} = true</code>\r
+     * a close tool button will be rendered into the tooltip header.\r
      */\r
     /**\r
-     * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays after the mouse enters the\r
-     * target element (defaults to 500)\r
+     * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays\r
+     * after the mouse enters the target element (defaults to 500)\r
      */\r
-    showDelay: 500,\r
+    showDelay : 500,\r
     /**\r
-     * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the target element but before the\r
-     * tooltip actually hides (defaults to 200).  Set to 0 for the tooltip to hide immediately.\r
+     * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the\r
+     * target element but before the tooltip actually hides (defaults to 200).\r
+     * Set to 0 for the tooltip to hide immediately.\r
      */\r
-    hideDelay: 200,\r
+    hideDelay : 200,\r
     /**\r
-     * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip automatically hides (defaults to 5000).\r
-     * To disable automatic hiding, set dismissDelay = 0.\r
+     * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip\r
+     * automatically hides (defaults to 5000). To disable automatic hiding, set\r
+     * dismissDelay = 0.\r
      */\r
-    dismissDelay: 5000,\r
+    dismissDelay : 5000,\r
     /**\r
-     * @cfg {Array} mouseOffset An XY offset from the mouse position where the tooltip should be shown (defaults to [15,18]).\r
+     * @cfg {Array} mouseOffset An XY offset from the mouse position where the\r
+     * tooltip should be shown (defaults to [15,18]).\r
      */\r
     /**\r
-     * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it moves over the target element (defaults to false).\r
+     * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it\r
+     * moves over the target element (defaults to false).\r
      */\r
     trackMouse : false,\r
     /**\r
-     * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target element, false to\r
-     * anchor it relative to the mouse coordinates (defaults to true).  When anchorToTarget is\r
-     * true, use {@link #defaultAlign} to control tooltip alignment to the target element.  When\r
-     * anchorToTarget is false, use {@link #anchorPosition} instead to control alignment.\r
+     * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target\r
+     * element, false to anchor it relative to the mouse coordinates (defaults\r
+     * to true).  When <code>anchorToTarget</code> is true, use\r
+     * <code>{@link #defaultAlign}</code> to control tooltip alignment to the\r
+     * target element.  When <code>anchorToTarget</code> is false, use\r
+     * <code>{@link #anchorPosition}</code> instead to control alignment.\r
      */\r
-    anchorToTarget: true,\r
+    anchorToTarget : true,\r
     /**\r
-     * @cfg {Number} anchorOffset A numeric pixel value used to offset the default position of the\r
-     * anchor arrow (defaults to 0).  When the anchor position is on the top or bottom of the tooltip,\r
-     * anchorOffset will be used as a horizontal offset.  Likewise, when the anchor position is on the\r
-     * left or right side, anchorOffset will be used as a vertical offset.\r
+     * @cfg {Number} anchorOffset A numeric pixel value used to offset the\r
+     * default position of the anchor arrow (defaults to 0).  When the anchor\r
+     * position is on the top or bottom of the tooltip, <code>anchorOffset</code>\r
+     * will be used as a horizontal offset.  Likewise, when the anchor position\r
+     * is on the left or right side, <code>anchorOffset</code> will be used as\r
+     * a vertical offset.\r
      */\r
-    anchorOffset: 0,\r
+    anchorOffset : 0,\r
     /**\r
-     * @cfg {String} delegate <p>Optional. A {@link Ext.DomQuery DomQuery} selector which allows selection of individual elements\r
-     * within the {@link #target} element to trigger showing and hiding the ToolTip as the mouse moves within the target.</p>\r
-     * <p>When specified, the child element of the target which caused a show event is placed into the {@link #triggerElement} property\r
+     * @cfg {String} delegate <p>Optional. A {@link Ext.DomQuery DomQuery}\r
+     * selector which allows selection of individual elements within the\r
+     * <code>{@link #target}</code> element to trigger showing and hiding the\r
+     * ToolTip as the mouse moves within the target.</p>\r
+     * <p>When specified, the child element of the target which caused a show\r
+     * event is placed into the <code>{@link #triggerElement}</code> property\r
      * before the ToolTip is shown.</p>\r
-     * <p>This may be useful when a Component has regular, repeating elements in it, each of which need a Tooltip which contains\r
-     * information specific to that element. For example:</p><pre><code>\r
+     * <p>This may be useful when a Component has regular, repeating elements\r
+     * in it, each of which need a Tooltip which contains information specific\r
+     * to that element. For example:</p><pre><code>\r
 var myGrid = new Ext.grid.gridPanel(gridConfig);\r
 myGrid.on('render', function(grid) {\r
     var store = grid.getStore();  // Capture the Store.\r
@@ -229,24 +248,27 @@ myGrid.on('render', function(grid) {
         target: view.mainBody,    // The overall target element.\r
         delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.\r
         trackMouse: true,         // Moving within the row should not hide the tip.\r
-        renderTo: document.body,  // Render immediately so that tip.body can be referenced prior to the first show.\r
-        listeners: {              // Change content dynamically depending on which element triggered the show.\r
+        renderTo: document.body,  // Render immediately so that tip.body can be\r
+                                  //  referenced prior to the first show.\r
+        listeners: {              // Change content dynamically depending on which element\r
+                                  //  triggered the show.\r
             beforeshow: function updateTipBody(tip) {\r
                 var rowIndex = view.findRowIndex(tip.triggerElement);\r
-                tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;\r
+                tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;\r
             }\r
         }\r
     });\r
-});</code></pre>\r
+});\r
+     *</code></pre>\r
      */\r
 \r
     // private\r
-    targetCounter: 0,\r
+    targetCounter : 0,\r
 \r
-    constrainPosition: false,\r
+    constrainPosition : false,\r
 \r
     // private\r
-    initComponent: function(){\r
+    initComponent : function(){\r
         Ext.ToolTip.superclass.initComponent.call(this);\r
         this.lastActive = new Date();\r
         this.initTarget(this.target);\r
@@ -276,10 +298,10 @@ myGrid.on('render', function(grid) {
         var t;\r
         if((t = Ext.get(target))){\r
             if(this.target){\r
-                this.target = Ext.get(this.target);\r
-                this.target.un('mouseover', this.onTargetOver, this);\r
-                this.target.un('mouseout', this.onTargetOut, this);\r
-                this.target.un('mousemove', this.onMouseMove, this);\r
+                var tg = Ext.get(this.target);\r
+                this.mun(tg, 'mouseover', this.onTargetOver, this);\r
+                this.mun(tg, 'mouseout', this.onTargetOut, this);\r
+                this.mun(tg, 'mousemove', this.onMouseMove, this);\r
             }\r
             this.mon(t, {\r
                 mouseover: this.onTargetOver,\r
@@ -315,6 +337,9 @@ myGrid.on('render', function(grid) {
 \r
     // private\r
     getTargetXY : function(){\r
+        if(this.delegate){\r
+            this.anchorTarget = this.triggerElement;\r
+        }\r
         if(this.anchor){\r
             this.targetCounter++;\r
             var offsets = this.getOffsets();\r
@@ -392,7 +417,7 @@ myGrid.on('render', function(grid) {
         }else{\r
             var m = this.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/);\r
             if(!m){\r
-               throw "AnchorTip.defaultAlign is invalid";\r
+               throw 'AnchorTip.defaultAlign is invalid';\r
             }\r
             this.tipAnchor = m[1].charAt(0);\r
         }\r
@@ -416,7 +441,7 @@ myGrid.on('render', function(grid) {
     },\r
 \r
     // private\r
-    getOffsets: function(){\r
+    getOffsets : function(){\r
         var offsets, ap = this.getAnchorPosition().charAt(0);\r
         if(this.anchorToTarget && !this.trackMouse){\r
             switch(ap){\r
@@ -545,6 +570,10 @@ myGrid.on('render', function(grid) {
         if(this.dismissDelay && this.autoHide !== false){\r
             this.dismissTimer = this.hide.defer(this.dismissDelay, this);\r
         }\r
+        if(this.anchor && !this.anchorEl.isVisible()){\r
+            this.syncAnchor();\r
+            this.anchorEl.show();\r
+        }\r
     },\r
 \r
     // private\r
@@ -639,9 +668,12 @@ myGrid.on('render', function(grid) {
         Ext.getDoc().un('mousedown', this.onDocMouseDown, this);\r
         Ext.ToolTip.superclass.onDestroy.call(this);\r
     }\r
-});/**\r
+});\r
+\r
+Ext.reg('tooltip', Ext.ToolTip);/**\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
@@ -731,6 +763,23 @@ Ext.QuickTip = Ext.extend(Ext.ToolTip, {
         }\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
@@ -741,7 +790,7 @@ Ext.QuickTip = Ext.extend(Ext.ToolTip, {
         if(!t || t.nodeType !== 1 || t == document || t == document.body){\r
             return;\r
         }\r
-        if(this.activeTarget && t == this.activeTarget.el){\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
@@ -756,18 +805,8 @@ Ext.QuickTip = Ext.extend(Ext.ToolTip, {
             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 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
@@ -789,6 +828,12 @@ Ext.QuickTip = Ext.extend(Ext.ToolTip, {
 \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
@@ -839,7 +884,8 @@ Ext.QuickTip = Ext.extend(Ext.ToolTip, {
         delete this.activeTarget;\r
         Ext.QuickTip.superclass.hide.call(this);\r
     }\r
-});/**\r
+});\r
+Ext.reg('quicktip', Ext.QuickTip);/**\r
  * @class Ext.QuickTips\r
  * <p>Provides attractive and customizable tooltips for any element. The QuickTips\r
  * singleton is used to configure and manage tooltips globally for multiple elements\r