Merge pull request geoext#52 from chrismayer/slider-tip

Adapted the example, because the SliderTip plugin can be used for every ...
tsufiev · May 8, 2012 · 9ac524d · 9ac524d
2 parents 072bc27 + 4b44d06
commit 9ac524d
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 13 deletions.
diff --git a/examples/zoomslider/zoomslider.js b/examples/zoomslider/zoomslider.js
@@ -1,14 +1,15 @@
 Ext.require([
     'GeoExt.panel.Map',
-    'GeoExt.slider.Zoom'
+    'GeoExt.slider.Zoom',
+    'GeoExt.slider.Tip'
 ]);
 
 var panel, slider;
 
 Ext.onReady(function() {
 
     // create a map panel with an embedded slider
-    panel = new GeoExt.MapPanel({
+    panel = Ext.create('GeoExt.MapPanel', {
         title: "Map",
         renderTo: "map-container",
         height: 300,
@@ -21,28 +22,35 @@ Ext.onReady(function() {
             "http://maps.opengeo.org/geowebcache/service/wms",
             {layers: "bluemarble"}
         )],
-        extent: [-5, 35, 15, 55]
-
-        ,
+        extent: [-5, 35, 15, 55],
         items: [{
             xtype: "gx_zoomslider",
             vertical: true,
             height: 100,
             x: 10,
-            y: 20
-//            ,
-//            plugins: new GeoExt.ZoomSliderTip()
+            y: 20,
+            plugins: new GeoExt.SliderTip({
+            	getText: function(thumb) {
+            		var slider = thumb.slider;
+            		var out = '<div>Zoom Level: {0}</div>' +
+			        '<div>Resolution: {1}</div>' +
+			        '<div>Scale: 1 : {2}</div>';
+            		return Ext.String.format(out, slider.getZoom(), slider.getResolution(), slider.getScale());
+            	}
+            })
         }]
     });
 
     // create a separate slider bound to the map but displayed elsewhere
-    slider = new GeoExt.ZoomSlider({
+    slider = Ext.create('GeoExt.ZoomSlider', {
         map: panel.map,
         aggressive: true,                                                                                                                                                   
         width: 200,
-//        plugins: new GeoExt.ZoomSliderTip({
-//            template: "<div>Zoom Level: {zoom}</div>"
-//        }),
+        plugins: new GeoExt.SliderTip({
+        	getText: function(thumb) {
+        		return Ext.String.format('<div>Zoom Level: {0}</div>', thumb.slider.getZoom());
+        	}
+        }),
         renderTo: document.body
     });
 

diff --git a/src/GeoExt/slider/Tip.js b/src/GeoExt/slider/Tip.js
@@ -2,6 +2,20 @@
  * @class GeoExt.slider.Tip
  * 
  * Create a slider tip displaying ``Ext.slider.SingleSlider`` values over slider thumbs.
+ * 
+ *     @example
+ *     var slider = Ext.create('GeoExt.ZoomSlider', {
+ *         map: panel.map,
+ *         aggressive: true,                                                                                                                                                   
+ *         width: 200,
+ *         plugins: new GeoExt.SliderTip({
+ *             getText: function(thumb) {
+ *                 return Ext.String.format('<div>Scale: 1:{0}</div>', thumb.slider.getScale());
+ *             }
+ *         }),
+ *         renderTo: document.body
+ *     });
+ * 
  */
 Ext.define('GeoExt.slider.Tip', {
     extend : 'Ext.slider.Tip',
@@ -43,6 +57,7 @@ Ext.define('GeoExt.slider.Tip', {
         if (this.hover) {
             slider.on("render", this.registerThumbListeners, this);
         }
+
         this.slider = slider;
     },
 
@@ -85,4 +100,4 @@ Ext.define('GeoExt.slider.Tip', {
         return this.callParent(arguments);
     }
 
-});
+});