Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Navigation.html
index 2418f1a..dcdbd4f 100644 (file)
@@ -1,55 +1,93 @@
-<!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.Navigation'>/**
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <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>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-chart-Navigation'>/**
 </span> * @class Ext.chart.Navigation
  *
  * Handles panning and zooming capabilities.
- * 
- * @ignore
+ *
+ * Used as mixin by Ext.chart.Chart.
  */
 Ext.define('Ext.chart.Navigation', {
 
     constructor: function() {
         this.originalStore = this.store;
     },
-    
-    //filters the store to the specified interval(s)
+
+<span id='Ext-chart-Navigation-method-setZoom'>    /**
+</span>     * Zooms the chart to the specified selection range.
+     * Can be used with a selection mask. For example:
+     *
+     *     items: {
+     *         xtype: 'chart',
+     *         animate: true,
+     *         store: store1,
+     *         mask: 'horizontal',
+     *         listeners: {
+     *             select: {
+     *                 fn: function(me, selection) {
+     *                     me.setZoom(selection);
+     *                     me.mask.hide();
+     *                 }
+     *             }
+     *         }
+     *     }
+     */
     setZoom: function(zoomConfig) {
         var me = this,
-            store = me.substore || me.store,
+            axes = me.axes,
             bbox = me.chartBBox,
-            len = store.getCount(),
-            from = (zoomConfig.x / bbox.width * len) &gt;&gt; 0,
-            to = Math.ceil(((zoomConfig.x + zoomConfig.width) / bbox.width * len)),
-            recFieldsLen, recFields = [], curField, json = [], obj;
-        
-        store.each(function(rec, i) {
-            if (i &lt; from || i &gt; to) {
-                return;
-            }
-            obj = {};
-            //get all record field names in a simple array
-            if (!recFields.length) {
-                rec.fields.each(function(f) {
-                    recFields.push(f.name);
-                });
-                recFieldsLen = recFields.length;
+            xScale = 1 / bbox.width,
+            yScale = 1 / bbox.height,
+            zoomer = {
+                x : zoomConfig.x * xScale,
+                y : zoomConfig.y * yScale,
+                width : zoomConfig.width * xScale,
+                height : zoomConfig.height * yScale
+            };
+        axes.each(function(axis) {
+            var ends = axis.calcEnds();
+            if (axis.position == 'bottom' || axis.position == 'top') {
+                var from = (ends.to - ends.from) * zoomer.x + ends.from,
+                    to = (ends.to - ends.from) * zoomer.width + from;
+                axis.minimum = from;
+                axis.maximum = to;
+            } else {
+                var to = (ends.to - ends.from) * (1 - zoomer.y) + ends.from,
+                    from = to - (ends.to - ends.from) * zoomer.height;
+                axis.minimum = from;
+                axis.maximum = to;
             }
-            //append record values to an aggregation record
-            for (i = 0; i &lt; recFieldsLen; i++) {
-                curField = recFields[i];
-                obj[curField] = rec.get(curField);
-            }
-            json.push(obj);
-        });
-        me.store = me.substore = Ext.create('Ext.data.JsonStore', {
-            fields: recFields,
-            data: json
         });
-        me.redraw(true);
+        me.redraw(false);
     },
 
+<span id='Ext-chart-Navigation-method-restoreZoom'>    /**
+</span>     * Restores the zoom to the original value. This can be used to reset
+     * the previous zoom state set by `setZoom`. For example:
+     *
+     *     myChart.restoreZoom();
+     */
     restoreZoom: function() {
         this.store = this.substore = this.originalStore;
         this.redraw(true);
     }
-    
-});</pre></pre></body></html>
\ No newline at end of file
+
+});
+</pre>
+</body>
+</html>