docs/source/Tip3.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-tip-Tip'>/**
  19 </span> * @class Ext.tip.Tip
  20  * @extends Ext.panel.Panel
  21  * This is the base class for {@link Ext.tip.QuickTip} and {@link Ext.tip.ToolTip} that provides the basic layout and
  22  * positioning that all tip-based classes require. This class can be used directly for simple, statically-positioned
  23  * tips that are displayed programmatically, or it can be extended to provide custom tip implementations.
  24  * @xtype tip
  25  */
  26 Ext.define('Ext.tip.Tip', {
  27     extend: 'Ext.panel.Panel',
  28     requires: [ 'Ext.layout.component.Tip' ],
  29     alternateClassName: 'Ext.Tip',
  30 <span id='Ext-tip-Tip-cfg-closable'>    /**
  31 </span>     * @cfg {Boolean} [closable=false]
  32      * True to render a close tool button into the tooltip header.
  33      */
  34 <span id='Ext-tip-Tip-cfg-width'>    /**
  35 </span>     * @cfg {Number} width
  36      * Width in pixels of the tip (defaults to auto).  Width will be ignored if it exceeds the bounds of
  37      * {@link #minWidth} or {@link #maxWidth}.  The maximum supported value is 500.
  38      */
  39 <span id='Ext-tip-Tip-cfg-minWidth'>    /**
  40 </span>     * @cfg {Number} minWidth The minimum width of the tip in pixels.
  41      */
  42     minWidth : 40,
  43 <span id='Ext-tip-Tip-cfg-maxWidth'>    /**
  44 </span>     * @cfg {Number} maxWidth The maximum width of the tip in pixels.  The maximum supported value is 500.
  45      */
  46     maxWidth : 300,
  47 <span id='Ext-tip-Tip-cfg-shadow'>    /**
  48 </span>     * @cfg {Boolean/String} shadow True or &quot;sides&quot; for the default effect, &quot;frame&quot; for 4-way shadow, and &quot;drop&quot;
  49      * for bottom-right shadow.
  50      */
  51     shadow : &quot;sides&quot;,
  52
  53 <span id='Ext-tip-Tip-cfg-defaultAlign'>    /**
  54 </span>     * @cfg {String} defaultAlign
  55      * &lt;b&gt;Experimental&lt;/b&gt;. The default {@link Ext.Element#alignTo} anchor position value for this tip relative
  56      * to its element of origin.
  57      */
  58     defaultAlign : &quot;tl-bl?&quot;,
  59 <span id='Ext-tip-Tip-cfg-constrainPosition'>    /**
  60 </span>     * @cfg {Boolean} constrainPosition
  61      * If true, then the tooltip will be automatically constrained to stay within the browser viewport.
  62      */
  63     constrainPosition : true,
  64
  65     // @inherited
  66     frame: false,
  67
  68     // private panel overrides
  69     autoRender: true,
  70     hidden: true,
  71     baseCls: Ext.baseCSSPrefix + 'tip',
  72     floating: {
  73         shadow: true,
  74         shim: true,
  75         constrain: true
  76     },
  77     focusOnToFront: false,
  78     componentLayout: 'tip',
  79
  80 <span id='Ext-tip-Tip-cfg-closeAction'>    /**
  81 </span>     * @cfg {String} closeAction
  82      * &lt;p&gt;The action to take when the close header tool is clicked:
  83      * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
  84      * &lt;li&gt;&lt;b&gt;&lt;code&gt;'{@link #destroy}'&lt;/code&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;
  85      * {@link #destroy remove} the window from the DOM and {@link Ext.Component#destroy destroy}
  86      * it and all descendant Components. The window will &lt;b&gt;not&lt;/b&gt; be available to be
  87      * redisplayed via the {@link #show} method.
  88      * &lt;/div&gt;&lt;/li&gt;
  89      * &lt;li&gt;&lt;b&gt;&lt;code&gt;'{@link #hide}'&lt;/code&gt;&lt;/b&gt; : &lt;b&gt;Default&lt;/b&gt;&lt;div class=&quot;sub-desc&quot;&gt;
  90      * {@link #hide} the window by setting visibility to hidden and applying negative offsets.
  91      * The window will be available to be redisplayed via the {@link #show} method.
  92      * &lt;/div&gt;&lt;/li&gt;
  93      * &lt;/ul&gt;&lt;/div&gt;
  94      * &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; This behavior has changed! setting *does* affect the {@link #close} method
  95      * which will invoke the approriate closeAction.
  96      */
  97     closeAction: 'hide',
  98
  99     ariaRole: 'tooltip',
 100
 101     initComponent: function() {
 102         var me = this;
 103
 104         me.floating = Ext.apply({}, {shadow: me.shadow}, me.self.prototype.floating);
 105         me.callParent(arguments);
 106
 107         // Or in the deprecated config. Floating.doConstrain only constrains if the constrain property is truthy.
 108         me.constrain = me.constrain || me.constrainPosition;
 109     },
 110
 111 <span id='Ext-tip-Tip-method-showAt'>    /**
 112 </span>     * Shows this tip at the specified XY position.  Example usage:
 113      * &lt;pre&gt;&lt;code&gt;
 114 // Show the tip at x:50 and y:100
 115 tip.showAt([50,100]);
 116 &lt;/code&gt;&lt;/pre&gt;
 117      * @param {Number[]} xy An array containing the x and y coordinates
 118      */
 119     showAt : function(xy){
 120         var me = this;
 121         this.callParent(arguments);
 122         // Show may have been vetoed.
 123         if (me.isVisible()) {
 124             me.setPagePosition(xy[0], xy[1]);
 125             if (me.constrainPosition || me.constrain) {
 126                 me.doConstrain();
 127             }
 128             me.toFront(true);
 129         }
 130     },
 131
 132 <span id='Ext-tip-Tip-method-showBy'>    /**
 133 </span>     * &lt;b&gt;Experimental&lt;/b&gt;. Shows this tip at a position relative to another element using a standard {@link Ext.Element#alignTo}
 134      * anchor position value.  Example usage:
 135      * &lt;pre&gt;&lt;code&gt;
 136 // Show the tip at the default position ('tl-br?')
 137 tip.showBy('my-el');
 138
 139 // Show the tip's top-left corner anchored to the element's top-right corner
 140 tip.showBy('my-el', 'tl-tr');
 141 &lt;/code&gt;&lt;/pre&gt;
 142      * @param {String/HTMLElement/Ext.Element} el An HTMLElement, Ext.Element or string id of the target element to align to
 143      * @param {String} [position] A valid {@link Ext.Element#alignTo} anchor position (defaults to 'tl-br?' or
 144      * {@link #defaultAlign} if specified).
 145      */
 146     showBy : function(el, pos) {
 147         this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign));
 148     },
 149
 150 <span id='Ext-tip-Tip-method-initDraggable'>    /**
 151 </span>     * @private
 152      * @override
 153      * Set Tip draggable using base Component's draggability
 154      */
 155     initDraggable : function(){
 156         var me = this;
 157         me.draggable = {
 158             el: me.getDragEl(),
 159             delegate: me.header.el,
 160             constrain: me,
 161             constrainTo: me.el.getScopeParent()
 162         };
 163         // Important: Bypass Panel's initDraggable. Call direct to Component's implementation.
 164         Ext.Component.prototype.initDraggable.call(me);
 165     },
 166
 167     // Tip does not ghost. Drag is &quot;live&quot;
 168     ghost: undefined,
 169     unghost: undefined
 170 });
 171 </pre>
 172 </body>
 173 </html>