/ext-4.1.0_b3/docs/source/Navigation.html
HTML | 98 lines | 94 code | 4 blank | 0 comment | 0 complexity | e1ec9d57b05e13dc1cd01c4b593a8ae3 MD5 | raw file
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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../resources/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-Navigation'>/**
19</span> * @class Ext.chart.Navigation
20 *
21 * Handles panning and zooming capabilities.
22 *
23 * Used as mixin by Ext.chart.Chart.
24 */
25Ext.define('Ext.chart.Navigation', {
26
27 constructor: function() {
28 this.originalStore = this.store;
29 },
30
31<span id='Ext-chart-Navigation-method-setZoom'> /**
32</span> * Zooms the chart to the specified selection range.
33 * Can be used with a selection mask. For example:
34 *
35 * items: {
36 * xtype: 'chart',
37 * animate: true,
38 * store: store1,
39 * mask: 'horizontal',
40 * listeners: {
41 * select: {
42 * fn: function(me, selection) {
43 * me.setZoom(selection);
44 * me.mask.hide();
45 * }
46 * }
47 * }
48 * }
49 */
50 setZoom: function(zoomConfig) {
51 var me = this,
52 axes = me.axes,
53 axesItems = axes.items,
54 i, ln, axis,
55 bbox = me.chartBBox,
56 xScale = 1 / bbox.width,
57 yScale = 1 / bbox.height,
58 zoomer = {
59 x : zoomConfig.x * xScale,
60 y : zoomConfig.y * yScale,
61 width : zoomConfig.width * xScale,
62 height : zoomConfig.height * yScale
63 };
64 for (i = 0, ln = axesItems.length; i < ln; i++) {
65 axis = axesItems[i];
66 var ends = axis.calcEnds();
67 if (axis.position == 'bottom' || axis.position == 'top') {
68 var from = (ends.to - ends.from) * zoomer.x + ends.from,
69 to = (ends.to - ends.from) * zoomer.width + from;
70 axis.minimum = from;
71 axis.maximum = to;
72 } else {
73 var to = (ends.to - ends.from) * (1 - zoomer.y) + ends.from,
74 from = to - (ends.to - ends.from) * zoomer.height;
75 axis.minimum = from;
76 axis.maximum = to;
77 }
78 }
79 me.redraw(false);
80 },
81
82<span id='Ext-chart-Navigation-method-restoreZoom'> /**
83</span> * Restores the zoom to the original value. This can be used to reset
84 * the previous zoom state set by `setZoom`. For example:
85 *
86 * myChart.restoreZoom();
87 */
88 restoreZoom: function() {
89 if (this.originalStore) {
90 this.store = this.substore = this.originalStore;
91 this.redraw(true);
92 }
93 }
94
95});
96</pre>
97</body>
98</html>