Tip.html 6.4 KB

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