docs/source/LegendItem.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-chart.LegendItem-method-constructor'><span id='Ext-chart.LegendItem'>/**
   2 </span></span> * @class Ext.chart.LegendItem
   3  * @extends Ext.draw.CompositeSprite
   4  * A single item of a legend (marker plus label)
   5  * @constructor
   6  */
   7 Ext.define('Ext.chart.LegendItem', {
   8
   9     /* Begin Definitions */
  10
  11     extend: 'Ext.draw.CompositeSprite',
  12
  13     requires: ['Ext.chart.Shape'],
  14
  15     /* End Definitions */
  16
  17     // Position of the item, relative to the upper-left corner of the legend box
  18     x: 0,
  19     y: 0,
  20     zIndex: 500,
  21
  22     constructor: function(config) {
  23         this.callParent(arguments);
  24         this.createLegend(config);
  25     },
  26
  27 <span id='Ext-chart.LegendItem-method-createLegend'>    /**
  28 </span>     * Creates all the individual sprites for this legend item
  29      */
  30     createLegend: function(config) {
  31         var me = this,
  32             index = config.yFieldIndex,
  33             series = me.series,
  34             seriesType = series.type,
  35             idx = me.yFieldIndex,
  36             legend = me.legend,
  37             surface = me.surface,
  38             refX = legend.x + me.x,
  39             refY = legend.y + me.y,
  40             bbox, z = me.zIndex,
  41             markerConfig, label, mask,
  42             radius, toggle = false,
  43             seriesStyle = Ext.apply(series.seriesStyle, series.style);
  44
  45         function getSeriesProp(name) {
  46             var val = series[name];
  47             return (Ext.isArray(val) ? val[idx] : val);
  48         }
  49
  50         label = me.add('label', surface.add({
  51             type: 'text',
  52             x: 20,
  53             y: 0,
  54             zIndex: z || 0,
  55             font: legend.labelFont,
  56             text: getSeriesProp('title') || getSeriesProp('yField')
  57         }));
  58
  59         // Line series - display as short line with optional marker in the middle
  60         if (seriesType === 'line' || seriesType === 'scatter') {
  61             if(seriesType === 'line') {
  62                 me.add('line', surface.add({
  63                     type: 'path',
  64                     path: 'M0.5,0.5L16.5,0.5',
  65                     zIndex: z,
  66                     &quot;stroke-width&quot;: series.lineWidth,
  67                     &quot;stroke-linejoin&quot;: &quot;round&quot;,
  68                     &quot;stroke-dasharray&quot;: series.dash,
  69                     stroke: seriesStyle.stroke || '#000',
  70                     style: {
  71                         cursor: 'pointer'
  72                     }
  73                 }));
  74             }
  75             if (series.showMarkers || seriesType === 'scatter') {
  76                 markerConfig = Ext.apply(series.markerStyle, series.markerConfig || {});
  77                 me.add('marker', Ext.chart.Shape[markerConfig.type](surface, {
  78                     fill: markerConfig.fill,
  79                     x: 8.5,
  80                     y: 0.5,
  81                     zIndex: z,
  82                     radius: markerConfig.radius || markerConfig.size,
  83                     style: {
  84                         cursor: 'pointer'
  85                     }
  86                 }));
  87             }
  88         }
  89         // All other series types - display as filled box
  90         else {
  91             me.add('box', surface.add({
  92                 type: 'rect',
  93                 zIndex: z,
  94                 x: 0,
  95                 y: 0,
  96                 width: 12,
  97                 height: 12,
  98                 fill: series.getLegendColor(index),
  99                 style: {
 100                     cursor: 'pointer'
 101                 }
 102             }));
 103         }
 104
 105         me.setAttributes({
 106             hidden: false
 107         }, true);
 108
 109         bbox = me.getBBox();
 110
 111         mask = me.add('mask', surface.add({
 112             type: 'rect',
 113             x: bbox.x,
 114             y: bbox.y,
 115             width: bbox.width || 20,
 116             height: bbox.height || 20,
 117             zIndex: (z || 0) + 1000,
 118             fill: '#f00',
 119             opacity: 0,
 120             style: {
 121                 'cursor': 'pointer'
 122             }
 123         }));
 124
 125         //add toggle listener
 126         me.on('mouseover', function() {
 127             label.setStyle({
 128                 'font-weight': 'bold'
 129             });
 130             mask.setStyle({
 131                 'cursor': 'pointer'
 132             });
 133             series._index = index;
 134             series.highlightItem();
 135         }, me);
 136
 137         me.on('mouseout', function() {
 138             label.setStyle({
 139                 'font-weight': 'normal'
 140             });
 141             series._index = index;
 142             series.unHighlightItem();
 143         }, me);
 144
 145         if (!series.visibleInLegend(index)) {
 146             toggle = true;
 147             label.setAttributes({
 148                opacity: 0.5
 149             }, true);
 150         }
 151
 152         me.on('mousedown', function() {
 153             if (!toggle) {
 154                 series.hideAll();
 155                 label.setAttributes({
 156                     opacity: 0.5
 157                 }, true);
 158             } else {
 159                 series.showAll();
 160                 label.setAttributes({
 161                     opacity: 1
 162                 }, true);
 163             }
 164             toggle = !toggle;
 165         }, me);
 166         me.updatePosition({x:0, y:0}); //Relative to 0,0 at first so that the bbox is calculated correctly
 167     },
 168
 169 <span id='Ext-chart.LegendItem-method-updatePosition'>    /**
 170 </span>     * Update the positions of all this item's sprites to match the root position
 171      * of the legend box.
 172      * @param {Object} relativeTo (optional) If specified, this object's 'x' and 'y' values will be used
 173      *                 as the reference point for the relative positioning. Defaults to the Legend.
 174      */
 175     updatePosition: function(relativeTo) {
 176         var me = this,
 177             items = me.items,
 178             ln = items.length,
 179             i = 0,
 180             item;
 181         if (!relativeTo) {
 182             relativeTo = me.legend;
 183         }
 184         for (; i &lt; ln; i++) {
 185             item = items[i];
 186             switch (item.type) {
 187                 case 'text':
 188                     item.setAttributes({
 189                         x: 20 + relativeTo.x + me.x,
 190                         y: relativeTo.y + me.y
 191                     }, true);
 192                     break;
 193                 case 'rect':
 194                     item.setAttributes({
 195                         translate: {
 196                             x: relativeTo.x + me.x,
 197                             y: relativeTo.y + me.y - 6
 198                         }
 199                     }, true);
 200                     break;
 201                 default:
 202                     item.setAttributes({
 203                         translate: {
 204                             x: relativeTo.x + me.x,
 205                             y: relativeTo.y + me.y
 206                         }
 207                     }, true);
 208             }
 209         }
 210     }
 211 });</pre></pre></body></html>