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-method-constructor'><span id='Ext-tip-Tip'>/**
  19 </span></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  * @constructor
  25  * Create a new Tip
  26  * @param {Object} config The configuration options
  27  * @xtype tip
  28  */
  29 Ext.define('Ext.tip.Tip', {
  30     extend: 'Ext.panel.Panel',
  31     requires: [ 'Ext.layout.component.Tip' ],
  32     alternateClassName: 'Ext.Tip',
  33 <span id='Ext-tip-Tip-cfg-closable'>    /**
  34 </span>     * @cfg {Boolean} closable True to render a close tool button into the tooltip header (defaults to false).
  35      */
  36 <span id='Ext-tip-Tip-cfg-width'>    /**
  37 </span>     * @cfg {Number} width
  38      * Width in pixels of the tip (defaults to auto).  Width will be ignored if it exceeds the bounds of
  39      * {@link #minWidth} or {@link #maxWidth}.  The maximum supported value is 500.
  40      */
  41 <span id='Ext-tip-Tip-cfg-minWidth'>    /**
  42 </span>     * @cfg {Number} minWidth The minimum width of the tip in pixels (defaults to 40).
  43      */
  44     minWidth : 40,
  45 <span id='Ext-tip-Tip-cfg-maxWidth'>    /**
  46 </span>     * @cfg {Number} maxWidth The maximum width of the tip in pixels (defaults to 300).  The maximum supported value is 500.
  47      */
  48     maxWidth : 300,
  49 <span id='Ext-tip-Tip-cfg-shadow'>    /**
  50 </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;
  51      * for bottom-right shadow (defaults to &quot;sides&quot;).
  52      */
  53     shadow : &quot;sides&quot;,
  54
  55 <span id='Ext-tip-Tip-cfg-defaultAlign'>    /**
  56 </span>     * @cfg {String} defaultAlign &lt;b&gt;Experimental&lt;/b&gt;. The default {@link Ext.core.Element#alignTo} anchor position value
  57      * for this tip relative to its element of origin (defaults to &quot;tl-bl?&quot;).
  58      */
  59     defaultAlign : &quot;tl-bl?&quot;,
  60 <span id='Ext-tip-Tip-cfg-constrainPosition'>    /**
  61 </span>     * @cfg {Boolean} constrainPosition If true, then the tooltip will be automatically constrained to stay within
  62      * the browser viewport. Defaults to false.
  63      */
  64     constrainPosition : true,
  65
  66 <span id='Ext-tip-Tip-property-frame'>    /**
  67 </span>     * @inherited
  68      */
  69     frame: false,
  70
  71     // private panel overrides
  72     autoRender: true,
  73     hidden: true,
  74     baseCls: Ext.baseCSSPrefix + 'tip',
  75     floating: {
  76         shadow: true,
  77         shim: true,
  78         constrain: true
  79     },
  80     focusOnToFront: false,
  81     componentLayout: 'tip',
  82
  83     closeAction: 'hide',
  84
  85     ariaRole: 'tooltip',
  86
  87     initComponent: function() {
  88         this.callParent(arguments);
  89
  90         // Or in the deprecated config. Floating.doConstrain only constrains if the constrain property is truthy.
  91         this.constrain = this.constrain || this.constrainPosition;
  92     },
  93
  94 <span id='Ext-tip-Tip-method-showAt'>    /**
  95 </span>     * Shows this tip at the specified XY position.  Example usage:
  96      * &lt;pre&gt;&lt;code&gt;
  97 // Show the tip at x:50 and y:100
  98 tip.showAt([50,100]);
  99 &lt;/code&gt;&lt;/pre&gt;
 100      * @param {Array} xy An array containing the x and y coordinates
 101      */
 102     showAt : function(xy){
 103         var me = this;
 104         this.callParent();
 105         // Show may have been vetoed.
 106         if (me.isVisible()) {
 107             me.setPagePosition(xy[0], xy[1]);
 108             if (me.constrainPosition || me.constrain) {
 109                 me.doConstrain();
 110             }
 111             me.toFront(true);
 112         }
 113     },
 114
 115 <span id='Ext-tip-Tip-method-showBy'>    /**
 116 </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}
 117      * anchor position value.  Example usage:
 118      * &lt;pre&gt;&lt;code&gt;
 119 // Show the tip at the default position ('tl-br?')
 120 tip.showBy('my-el');
 121
 122 // Show the tip's top-left corner anchored to the element's top-right corner
 123 tip.showBy('my-el', 'tl-tr');
 124 &lt;/code&gt;&lt;/pre&gt;
 125      * @param {Mixed} el An HTMLElement, Ext.core.Element or string id of the target element to align to
 126      * @param {String} position (optional) A valid {@link Ext.core.Element#alignTo} anchor position (defaults to 'tl-br?' or
 127      * {@link #defaultAlign} if specified).
 128      */
 129     showBy : function(el, pos) {
 130         this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign));
 131     },
 132
 133 <span id='Ext-tip-Tip-method-initDraggable'>    /**
 134 </span>     * @private
 135      * @override
 136      * Set Tip draggable using base Component's draggability
 137      */
 138     initDraggable : function(){
 139         var me = this;
 140         me.draggable = {
 141             el: me.getDragEl(),
 142             delegate: me.header.el,
 143             constrain: me,
 144             constrainTo: me.el.dom.parentNode
 145         };
 146         // Important: Bypass Panel's initDraggable. Call direct to Component's implementation.
 147         Ext.Component.prototype.initDraggable.call(me);
 148     },
 149
 150     // Tip does not ghost. Drag is &quot;live&quot;
 151     ghost: undefined,
 152     unghost: undefined
 153 });
 154 </pre>
 155 </body>
 156 </html>