QuickTipManager.html 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  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-QuickTipManager'>/**
  19. </span> * Provides attractive and customizable tooltips for any element. The QuickTips
  20. * singleton is used to configure and manage tooltips globally for multiple elements
  21. * in a generic manner. To create individual tooltips with maximum customizability,
  22. * you should consider either {@link Ext.tip.Tip} or {@link Ext.tip.ToolTip}.
  23. *
  24. * Quicktips can be configured via tag attributes directly in markup, or by
  25. * registering quick tips programmatically via the {@link #register} method.
  26. *
  27. * The singleton's instance of {@link Ext.tip.QuickTip} is available via
  28. * {@link #getQuickTip}, and supports all the methods, and all the all the
  29. * configuration properties of Ext.tip.QuickTip. These settings will apply to all
  30. * tooltips shown by the singleton.
  31. *
  32. * Below is the summary of the configuration properties which can be used.
  33. * For detailed descriptions see the config options for the
  34. * {@link Ext.tip.QuickTip QuickTip} class
  35. *
  36. * ## QuickTips singleton configs (all are optional)
  37. *
  38. * - `dismissDelay`
  39. * - `hideDelay`
  40. * - `maxWidth`
  41. * - `minWidth`
  42. * - `showDelay`
  43. * - `trackMouse`
  44. *
  45. * ## Target element configs (optional unless otherwise noted)
  46. *
  47. * - `autoHide`
  48. * - `cls`
  49. * - `dismissDelay` (overrides singleton value)
  50. * - `target` (required)
  51. * - `text` (required)
  52. * - `title`
  53. * - `width`
  54. *
  55. * Here is an example showing how some of these config options could be used:
  56. *
  57. * @example
  58. * // Init the singleton. Any tag-based quick tips will start working.
  59. * Ext.tip.QuickTipManager.init();
  60. *
  61. * // Apply a set of config properties to the singleton
  62. * Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
  63. * maxWidth: 200,
  64. * minWidth: 100,
  65. * showDelay: 50 // Show 50ms after entering target
  66. * });
  67. *
  68. * // Create a small panel to add a quick tip to
  69. * Ext.create('Ext.container.Container', {
  70. * id: 'quickTipContainer',
  71. * width: 200,
  72. * height: 150,
  73. * style: {
  74. * backgroundColor:'#000000'
  75. * },
  76. * renderTo: Ext.getBody()
  77. * });
  78. *
  79. *
  80. * // Manually register a quick tip for a specific element
  81. * Ext.tip.QuickTipManager.register({
  82. * target: 'quickTipContainer',
  83. * title: 'My Tooltip',
  84. * text: 'This tooltip was added in code',
  85. * width: 100,
  86. * dismissDelay: 10000 // Hide after 10 seconds hover
  87. * });
  88. *
  89. * To register a quick tip in markup, you simply add one or more of the valid QuickTip
  90. * attributes prefixed with the **data-** namespace. The HTML element itself is
  91. * automatically set as the quick tip target. Here is the summary of supported attributes
  92. * (optional unless otherwise noted):
  93. *
  94. * - `hide`: Specifying &quot;user&quot; is equivalent to setting autoHide = false.
  95. * Any other value will be the same as autoHide = true.
  96. * - `qclass`: A CSS class to be applied to the quick tip
  97. * (equivalent to the 'cls' target element config).
  98. * - `qtip (required)`: The quick tip text (equivalent to the 'text' target element config).
  99. * - `qtitle`: The quick tip title (equivalent to the 'title' target element config).
  100. * - `qwidth`: The quick tip width (equivalent to the 'width' target element config).
  101. *
  102. * Here is an example of configuring an HTML element to display a tooltip from markup:
  103. *
  104. * // Add a quick tip to an HTML button
  105. * &lt;input type=&quot;button&quot; value=&quot;OK&quot; data-qtitle=&quot;OK Button&quot; data-qwidth=&quot;100&quot;
  106. * data-qtip=&quot;This is a quick tip from markup!&quot;&gt;&lt;/input&gt;
  107. *
  108. * @singleton
  109. */
  110. Ext.define('Ext.tip.QuickTipManager', (function() {
  111. var tip,
  112. disabled = false;
  113. return {
  114. requires: ['Ext.tip.QuickTip'],
  115. singleton: true,
  116. alternateClassName: 'Ext.QuickTips',
  117. <span id='Ext-tip-QuickTipManager-method-init'> /**
  118. </span> * Initializes the global QuickTips instance and prepare any quick tips.
  119. * @param {Boolean} [autoRender=true] True to render the QuickTips container
  120. * immediately to preload images.
  121. * @param {Object} [config] config object for the created QuickTip. By
  122. * default, the {@link Ext.tip.QuickTip QuickTip} class is instantiated, but this can
  123. * be changed by supplying an xtype property or a className property in this object.
  124. * All other properties on this object are configuration for the created component.
  125. */
  126. init : function (autoRender, config) {
  127. if (!tip) {
  128. if (!Ext.isReady) {
  129. Ext.onReady(function(){
  130. Ext.tip.QuickTipManager.init(autoRender, config);
  131. });
  132. return;
  133. }
  134. var tipConfig = Ext.apply({ disabled: disabled, id: 'ext-quicktips-tip' }, config),
  135. className = tipConfig.className,
  136. xtype = tipConfig.xtype;
  137. if (className) {
  138. delete tipConfig.className;
  139. } else if (xtype) {
  140. className = 'widget.' + xtype;
  141. delete tipConfig.xtype;
  142. }
  143. if (autoRender !== false) {
  144. tipConfig.renderTo = document.body;
  145. //&lt;debug&gt;
  146. if (tipConfig.renderTo.tagName.toUpperCase() != 'BODY') { // e.g., == 'FRAMESET'
  147. Ext.Error.raise({
  148. sourceClass: 'Ext.tip.QuickTipManager',
  149. sourceMethod: 'init',
  150. msg: 'Cannot init QuickTipManager: no document body'
  151. });
  152. }
  153. //&lt;/debug&gt;
  154. }
  155. tip = Ext.create(className || 'Ext.tip.QuickTip', tipConfig);
  156. }
  157. },
  158. <span id='Ext-tip-QuickTipManager-method-destroy'> /**
  159. </span> * Destroys the QuickTips instance.
  160. */
  161. destroy: function() {
  162. if (tip) {
  163. var undef;
  164. tip.destroy();
  165. tip = undef;
  166. }
  167. },
  168. // Protected method called by the dd classes
  169. ddDisable : function(){
  170. // don't disable it if we don't need to
  171. if(tip &amp;&amp; !disabled){
  172. tip.disable();
  173. }
  174. },
  175. // Protected method called by the dd classes
  176. ddEnable : function(){
  177. // only enable it if it hasn't been disabled
  178. if(tip &amp;&amp; !disabled){
  179. tip.enable();
  180. }
  181. },
  182. <span id='Ext-tip-QuickTipManager-method-enable'> /**
  183. </span> * Enables quick tips globally.
  184. */
  185. enable : function(){
  186. if(tip){
  187. tip.enable();
  188. }
  189. disabled = false;
  190. },
  191. <span id='Ext-tip-QuickTipManager-method-disable'> /**
  192. </span> * Disables quick tips globally.
  193. */
  194. disable : function(){
  195. if(tip){
  196. tip.disable();
  197. }
  198. disabled = true;
  199. },
  200. <span id='Ext-tip-QuickTipManager-method-isEnabled'> /**
  201. </span> * Returns true if quick tips are enabled, else false.
  202. * @return {Boolean}
  203. */
  204. isEnabled : function(){
  205. return tip !== undefined &amp;&amp; !tip.disabled;
  206. },
  207. <span id='Ext-tip-QuickTipManager-method-getQuickTip'> /**
  208. </span> * Gets the single {@link Ext.tip.QuickTip QuickTip} instance used to show tips
  209. * from all registered elements.
  210. * @return {Ext.tip.QuickTip}
  211. */
  212. getQuickTip : function(){
  213. return tip;
  214. },
  215. <span id='Ext-tip-QuickTipManager-method-register'> /**
  216. </span> * Configures a new quick tip instance and assigns it to a target element. See
  217. * {@link Ext.tip.QuickTip#register} for details.
  218. * @param {Object} config The config object
  219. */
  220. register : function(){
  221. tip.register.apply(tip, arguments);
  222. },
  223. <span id='Ext-tip-QuickTipManager-method-unregister'> /**
  224. </span> * Removes any registered quick tip from the target element and destroys it.
  225. * @param {String/HTMLElement/Ext.Element} el The element from which the quick tip
  226. * is to be removed or ID of the element.
  227. */
  228. unregister : function(){
  229. tip.unregister.apply(tip, arguments);
  230. },
  231. <span id='Ext-tip-QuickTipManager-method-tips'> /**
  232. </span> * Alias of {@link #register}.
  233. * @inheritdoc Ext.tip.QuickTipManager#register
  234. */
  235. tips : function(){
  236. tip.register.apply(tip, arguments);
  237. }
  238. };
  239. }()));</pre>
  240. </body>
  241. </html>