X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..HEAD:/src/chart/Navigation.js diff --git a/src/chart/Navigation.js b/src/chart/Navigation.js index c43418a7..5e5ae4b6 100644 --- a/src/chart/Navigation.js +++ b/src/chart/Navigation.js @@ -16,7 +16,7 @@ If you are unsure which license is appropriate for your use, please contact the * @class Ext.chart.Navigation * * Handles panning and zooming capabilities. - * + * * Used as mixin by Ext.chart.Chart. */ Ext.define('Ext.chart.Navigation', { @@ -24,46 +24,65 @@ 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; - } - //append record values to an aggregation record - for (i = 0; i < recFieldsLen; i++) { - curField = recFields[i]; - obj[curField] = rec.get(curField); + 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; } - 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); } - + }); +