Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Legend.html
index 9351dd4..b9e62e8 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   <style type="text/css">
     .highlight { display: block; background-color: #ddd; }
   </style>
@@ -15,8 +15,8 @@
   </script>
 </head>
 <body onload="prettyPrint(); highlight();">
-  <pre class="prettyprint lang-js"><span id='Ext-chart-Legend-method-constructor'><span id='Ext-chart-Legend'>/**
-</span></span> * @class Ext.chart.Legend
+  <pre class="prettyprint lang-js"><span id='Ext-chart-Legend'>/**
+</span> * @class Ext.chart.Legend
  *
  * Defines a legend for a chart's series.
  * The 'chart' member must be set prior to rendering.
  *     legend: {
  *         position: 'right'
  *     },
- * 
- * Full example:
-    &lt;pre&gt;&lt;code&gt;
-    var store = Ext.create('Ext.data.JsonStore', {
-        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
-        data: [
-            {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
-            {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
-            {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
-            {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
-            {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}                                                
-        ]
-    });
-    
-    Ext.create('Ext.chart.Chart', {
-        renderTo: Ext.getBody(),
-        width: 500,
-        height: 300,
-        animate: true,
-        store: store,
-        shadow: true,
-        theme: 'Category1',
-        legend: {
-            position: 'top'
-        },
-         axes: [{
-                type: 'Numeric',
-                grid: true,
-                position: 'left',
-                fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
-                title: 'Sample Values',
-                grid: {
-                    odd: {
-                        opacity: 1,
-                        fill: '#ddd',
-                        stroke: '#bbb',
-                        'stroke-width': 1
-                    }
-                },
-                minimum: 0,
-                adjustMinimumByMajorUnit: 0
-            }, {
-                type: 'Category',
-                position: 'bottom',
-                fields: ['name'],
-                title: 'Sample Metrics',
-                grid: true,
-                label: {
-                    rotate: {
-                        degrees: 315
-                    }
-                }
-        }],
-        series: [{
-            type: 'area',
-            highlight: false,
-            axis: 'left',
-            xField: 'name',
-            yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
-            style: {
-                opacity: 0.93
-            }
-        }]
-    });    
-    &lt;/code&gt;&lt;/pre&gt;    
  *
- * @constructor
+ * ## Example
+ *
+ *     @example
+ *     var store = Ext.create('Ext.data.JsonStore', {
+ *         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
+ *         data: [
+ *             { 'name': 'metric one',   'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8,  'data5': 13 },
+ *             { 'name': 'metric two',   'data1': 7,  'data2': 8,  'data3': 16, 'data4': 10, 'data5': 3  },
+ *             { 'name': 'metric three', 'data1': 5,  'data2': 2,  'data3': 14, 'data4': 12, 'data5': 7  },
+ *             { 'name': 'metric four',  'data1': 2,  'data2': 14, 'data3': 6,  'data4': 1,  'data5': 23 },
+ *             { 'name': 'metric five',  'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }
+ *         ]
+ *     });
+ *
+ *     Ext.create('Ext.chart.Chart', {
+ *         renderTo: Ext.getBody(),
+ *         width: 500,
+ *         height: 300,
+ *         animate: true,
+ *         store: store,
+ *         shadow: true,
+ *         theme: 'Category1',
+ *         legend: {
+ *             position: 'top'
+ *         },
+ *         axes: [
+ *             {
+ *                 type: 'Numeric',
+ *                 grid: true,
+ *                 position: 'left',
+ *                 fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
+ *                 title: 'Sample Values',
+ *                 grid: {
+ *                     odd: {
+ *                         opacity: 1,
+ *                         fill: '#ddd',
+ *                         stroke: '#bbb',
+ *                         'stroke-width': 1
+ *                     }
+ *                 },
+ *                 minimum: 0,
+ *                 adjustMinimumByMajorUnit: 0
+ *             },
+ *             {
+ *                 type: 'Category',
+ *                 position: 'bottom',
+ *                 fields: ['name'],
+ *                 title: 'Sample Metrics',
+ *                 grid: true,
+ *                 label: {
+ *                     rotate: {
+ *                         degrees: 315
+ *                     }
+ *                 }
+ *             }
+ *         ],
+ *         series: [{
+ *             type: 'area',
+ *             highlight: false,
+ *             axis: 'left',
+ *             xField: 'name',
+ *             yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
+ *             style: {
+ *                 opacity: 0.93
+ *             }
+ *         }]
+ *     });
  */
 Ext.define('Ext.chart.Legend', {
 
@@ -123,7 +124,7 @@ Ext.define('Ext.chart.Legend', {
 
 <span id='Ext-chart-Legend-cfg-x'>    /**
 </span>     * @cfg {Number} x
-     * X-position of the legend box. Used directly if position is set to &quot;float&quot;, otherwise 
+     * X-position of the legend box. Used directly if position is set to &quot;float&quot;, otherwise
      * it will be calculated dynamically.
      */
     x: 0,
@@ -182,6 +183,10 @@ Ext.define('Ext.chart.Legend', {
      */
     boxZIndex: 100,
 
+<span id='Ext-chart-Legend-method-constructor'>    /**
+</span>     * Creates new Legend.
+     * @param {Object} config  (optional) Config object.
+     */
     constructor: function(config) {
         var me = this;
         if (config) {
@@ -193,7 +198,7 @@ Ext.define('Ext.chart.Legend', {
          * @type {Boolean}
          */
         me.isVertical = (&quot;left|right|float&quot;.indexOf(me.position) !== -1);
-        
+
         // cache these here since they may get modified later on
         me.origX = me.x;
         me.origY = me.y;
@@ -204,9 +209,9 @@ Ext.define('Ext.chart.Legend', {
      */
     create: function() {
         var me = this;
+        me.createBox();
         me.createItems();
         if (!me.created &amp;&amp; me.isDisplayed()) {
-            me.createBox();
             me.created = true;
 
             // Listen for changes to series titles to trigger regeneration of the legend
@@ -246,8 +251,8 @@ Ext.define('Ext.chart.Legend', {
             math = Math,
             mfloor = math.floor,
             mmax = math.max,
-            index = 0, 
-            i = 0, 
+            index = 0,
+            i = 0,
             len = items ? items.length : 0,
             x, y, spacing, item, bbox, height, width;
 
@@ -273,7 +278,7 @@ Ext.define('Ext.chart.Legend', {
                     bbox = item.getBBox();
 
                     //always measure from x=0, since not all markers go all the way to the left
-                    width = bbox.width; 
+                    width = bbox.width;
                     height = bbox.height;
 
                     if (i + j === 0) {
@@ -324,13 +329,20 @@ Ext.define('Ext.chart.Legend', {
      */
     createBox: function() {
         var me = this,
-            box = me.boxSprite = me.chart.surface.add(Ext.apply({
-                type: 'rect',
-                stroke: me.boxStroke,
-                &quot;stroke-width&quot;: me.boxStrokeWidth,
-                fill: me.boxFill,
-                zIndex: me.boxZIndex
-            }, me.getBBox()));
+            box;
+
+        if (me.boxSprite) {
+            me.boxSprite.destroy();
+        }
+        
+        box = me.boxSprite = me.chart.surface.add(Ext.apply({
+            type: 'rect',
+            stroke: me.boxStroke,
+            &quot;stroke-width&quot;: me.boxStrokeWidth,
+            fill: me.boxFill,
+            zIndex: me.boxZIndex
+        }, me.getBBox()));
+
         box.redraw();
     },
 
@@ -352,7 +364,7 @@ Ext.define('Ext.chart.Legend', {
             chartY = chartBBox.y + insets,
             surface = chart.surface,
             mfloor = Math.floor;
-        
+
         if (me.isDisplayed()) {
             // Find the position based on the dimensions
             switch(me.position) {
@@ -387,6 +399,7 @@ Ext.define('Ext.chart.Legend', {
             me.boxSprite.setAttributes(me.getBBox(), true);
         }
     }
-});</pre>
+});
+</pre>
 </body>
 </html>