Highlight.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  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-chart-Highlight'>/**
  19. </span> * @class Ext.chart.Highlight
  20. * A mixin providing highlight functionality for Ext.chart.series.Series.
  21. */
  22. Ext.define('Ext.chart.Highlight', {
  23. /* Begin Definitions */
  24. requires: ['Ext.fx.Anim'],
  25. /* End Definitions */
  26. <span id='Ext-chart-Highlight-method-highlight'> /**
  27. </span> * Highlight the given series item.
  28. * @param {Boolean/Object} Default's false. Can also be an object width style properties (i.e fill, stroke, radius)
  29. * or just use default styles per series by setting highlight = true.
  30. */
  31. highlight: false,
  32. highlightCfg : {
  33. fill: '#fdd',
  34. &quot;stroke-width&quot;: 5,
  35. stroke: '#f55'
  36. },
  37. constructor: function(config) {
  38. if (config.highlight) {
  39. if (config.highlight !== true) { //is an object
  40. this.highlightCfg = Ext.merge(this.highlightCfg, config.highlight);
  41. }
  42. }
  43. },
  44. <span id='Ext-chart-Highlight-method-highlightItem'> /**
  45. </span> * Highlight the given series item.
  46. * @param {Object} item Info about the item; same format as returned by #getItemForPoint.
  47. */
  48. highlightItem: function(item) {
  49. if (!item) {
  50. return;
  51. }
  52. var me = this,
  53. sprite = item.sprite,
  54. opts = Ext.merge({}, me.highlightCfg, me.highlight),
  55. surface = me.chart.surface,
  56. animate = me.chart.animate,
  57. p, from, to, pi;
  58. if (!me.highlight || !sprite || sprite._highlighted) {
  59. return;
  60. }
  61. if (sprite._anim) {
  62. sprite._anim.paused = true;
  63. }
  64. sprite._highlighted = true;
  65. if (!sprite._defaults) {
  66. sprite._defaults = Ext.apply({}, sprite.attr);
  67. from = {};
  68. to = {};
  69. for (p in opts) {
  70. if (! (p in sprite._defaults)) {
  71. sprite._defaults[p] = surface.availableAttrs[p];
  72. }
  73. from[p] = sprite._defaults[p];
  74. to[p] = opts[p];
  75. if (Ext.isObject(opts[p])) {
  76. from[p] = {};
  77. to[p] = {};
  78. Ext.apply(sprite._defaults[p], sprite.attr[p]);
  79. Ext.apply(from[p], sprite._defaults[p]);
  80. for (pi in sprite._defaults[p]) {
  81. if (! (pi in opts[p])) {
  82. to[p][pi] = from[p][pi];
  83. } else {
  84. to[p][pi] = opts[p][pi];
  85. }
  86. }
  87. for (pi in opts[p]) {
  88. if (! (pi in to[p])) {
  89. to[p][pi] = opts[p][pi];
  90. }
  91. }
  92. }
  93. }
  94. sprite._from = from;
  95. sprite._to = to;
  96. sprite._endStyle = to;
  97. }
  98. if (animate) {
  99. sprite._anim = new Ext.fx.Anim({
  100. target: sprite,
  101. from: sprite._from,
  102. to: sprite._to,
  103. duration: 150
  104. });
  105. } else {
  106. sprite.setAttributes(sprite._to, true);
  107. }
  108. },
  109. <span id='Ext-chart-Highlight-method-unHighlightItem'> /**
  110. </span> * Un-highlight any existing highlights
  111. */
  112. unHighlightItem: function() {
  113. if (!this.highlight || !this.items) {
  114. return;
  115. }
  116. var me = this,
  117. items = me.items,
  118. len = items.length,
  119. opts = Ext.merge({}, me.highlightCfg, me.highlight),
  120. animate = me.chart.animate,
  121. i = 0,
  122. obj, p, sprite;
  123. for (; i &lt; len; i++) {
  124. if (!items[i]) {
  125. continue;
  126. }
  127. sprite = items[i].sprite;
  128. if (sprite &amp;&amp; sprite._highlighted) {
  129. if (sprite._anim) {
  130. sprite._anim.paused = true;
  131. }
  132. obj = {};
  133. for (p in opts) {
  134. if (Ext.isObject(sprite._defaults[p])) {
  135. obj[p] = {};
  136. Ext.apply(obj[p], sprite._defaults[p]);
  137. }
  138. else {
  139. obj[p] = sprite._defaults[p];
  140. }
  141. }
  142. if (animate) {
  143. //sprite._to = obj;
  144. sprite._endStyle = obj;
  145. sprite._anim = new Ext.fx.Anim({
  146. target: sprite,
  147. to: obj,
  148. duration: 150
  149. });
  150. }
  151. else {
  152. sprite.setAttributes(obj, true);
  153. }
  154. delete sprite._highlighted;
  155. //delete sprite._defaults;
  156. }
  157. }
  158. },
  159. cleanHighlights: function() {
  160. if (!this.highlight) {
  161. return;
  162. }
  163. var group = this.group,
  164. markerGroup = this.markerGroup,
  165. i = 0,
  166. l;
  167. for (l = group.getCount(); i &lt; l; i++) {
  168. delete group.getAt(i)._defaults;
  169. }
  170. if (markerGroup) {
  171. for (l = markerGroup.getCount(); i &lt; l; i++) {
  172. delete markerGroup.getAt(i)._defaults;
  173. }
  174. }
  175. }
  176. });</pre>
  177. </body>
  178. </html>