X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..refs/heads/master:/docs/source/Navigation.html diff --git a/docs/source/Navigation.html b/docs/source/Navigation.html index 2418f1a2..dcdbd4f9 100644 --- a/docs/source/Navigation.html +++ b/docs/source/Navigation.html @@ -1,55 +1,93 @@ -Sencha Documentation Project
/**
+
+
+
+  
+  The source code
+  
+  
+  
+  
+
+
+  
/**
  * @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)
+
+    /**
+     * 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) >> 0,
-            to = Math.ceil(((zoomConfig.x + zoomConfig.width) / bbox.width * len)),
-            recFieldsLen, recFields = [], curField, json = [], obj;
-        
-        store.each(function(rec, i) {
-            if (i < from || i > 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 < 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);
     },
 
+    /**
+     * 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);
     }
-    
-});
\ No newline at end of file + +}); +
+ +