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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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 True to render a close tool button into the tooltip header (defaults to false).
  32      */
  33 <span id='Ext-tip-Tip-cfg-width'>    /**
  34 </span>     * @cfg {Number} width
  35      * Width in pixels of the tip (defaults to auto).  Width will be ignored if it exceeds the bounds of
  36      * {@link #minWidth} or {@link #maxWidth}.  The maximum supported value is 500.
  37      */
  38 <span id='Ext-tip-Tip-cfg-minWidth'>    /**
  39 </span>     * @cfg {Number} minWidth The minimum width of the tip in pixels (defaults to 40).
  40      */
  41     minWidth : 40,
  42 <span id='Ext-tip-Tip-cfg-maxWidth'>    /**
  43 </span>     * @cfg {Number} maxWidth The maximum width of the tip in pixels (defaults to 300).  The maximum supported value is 500.
  44      */
  45     maxWidth : 300,
  46 <span id='Ext-tip-Tip-cfg-shadow'>    /**
  47 </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;
  48      * for bottom-right shadow (defaults to &quot;sides&quot;).
  49      */
  50     shadow : &quot;sides&quot;,
  51
  52 <span id='Ext-tip-Tip-cfg-defaultAlign'>    /**
  53 </span>     * @cfg {String} defaultAlign &lt;b&gt;Experimental&lt;/b&gt;. The default {@link Ext.core.Element#alignTo} anchor position value
  54      * for this tip relative to its element of origin (defaults to &quot;tl-bl?&quot;).
  55      */
  56     defaultAlign : &quot;tl-bl?&quot;,
  57 <span id='Ext-tip-Tip-cfg-constrainPosition'>    /**
  58 </span>     * @cfg {Boolean} constrainPosition If true, then the tooltip will be automatically constrained to stay within
  59      * the browser viewport. Defaults to false.
  60      */
  61     constrainPosition : true,
  62
  63 <span id='Ext-tip-Tip-property-frame'>    /**
  64 </span>     * @inherited
  65      */
  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         this.callParent(arguments);
 103
 104         // Or in the deprecated config. Floating.doConstrain only constrains if the constrain property is truthy.
 105         this.constrain = this.constrain || this.constrainPosition;
 106     },
 107
 108 <span id='Ext-tip-Tip-method-showAt'>    /**
 109 </span>     * Shows this tip at the specified XY position.  Example usage:
 110      * &lt;pre&gt;&lt;code&gt;
 111 // Show the tip at x:50 and y:100
 112 tip.showAt([50,100]);
 113 &lt;/code&gt;&lt;/pre&gt;
 114      * @param {Array} xy An array containing the x and y coordinates
 115      */
 116     showAt : function(xy){
 117         var me = this;
 118         this.callParent();
 119         // Show may have been vetoed.
 120         if (me.isVisible()) {
 121             me.setPagePosition(xy[0], xy[1]);
 122             if (me.constrainPosition || me.constrain) {
 123                 me.doConstrain();
 124             }
 125             me.toFront(true);
 126         }
 127     },
 128
 129 <span id='Ext-tip-Tip-method-showBy'>    /**
 130 </span>     * &lt;b&gt;Experimental&lt;/b&gt;. Shows this tip at a position relative to another element using a standard {@link Ext.core.Element#alignTo}
 131      * anchor position value.  Example usage:
 132      * &lt;pre&gt;&lt;code&gt;
 133 // Show the tip at the default position ('tl-br?')
 134 tip.showBy('my-el');
 135
 136 // Show the tip's top-left corner anchored to the element's top-right corner
 137 tip.showBy('my-el', 'tl-tr');
 138 &lt;/code&gt;&lt;/pre&gt;
 139      * @param {Mixed} el An HTMLElement, Ext.core.Element or string id of the target element to align to
 140      * @param {String} position (optional) A valid {@link Ext.core.Element#alignTo} anchor position (defaults to 'tl-br?' or
 141      * {@link #defaultAlign} if specified).
 142      */
 143     showBy : function(el, pos) {
 144         this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign));
 145     },
 146
 147 <span id='Ext-tip-Tip-method-initDraggable'>    /**
 148 </span>     * @private
 149      * @override
 150      * Set Tip draggable using base Component's draggability
 151      */
 152     initDraggable : function(){
 153         var me = this;
 154         me.draggable = {
 155             el: me.getDragEl(),
 156             delegate: me.header.el,
 157             constrain: me,
 158             constrainTo: me.el.dom.parentNode
 159         };
 160         // Important: Bypass Panel's initDraggable. Call direct to Component's implementation.
 161         Ext.Component.prototype.initDraggable.call(me);
 162     },
 163
 164     // Tip does not ghost. Drag is &quot;live&quot;
 165     ghost: undefined,
 166     unghost: undefined
 167 });
 168 </pre>
 169 </body>
 170 </html>