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