[Commits] r2383 - in core/trunk/geoext: examples lib/GeoExt/widgets/tips
commits at geoext.org
commits at geoext.org
Tue Sep 21 18:52:47 CEST 2010
Author: tschaub
Date: 2010-09-21 18:52:47 +0200 (Tue, 21 Sep 2010)
New Revision: 2383
Added:
core/trunk/geoext/examples/slidertip.html
core/trunk/geoext/examples/slidertip.js
Modified:
core/trunk/geoext/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js
core/trunk/geoext/lib/GeoExt/widgets/tips/SliderTip.js
core/trunk/geoext/lib/GeoExt/widgets/tips/ZoomSliderTip.js
Log:
Bringing the GeoExt.SliderTip in line with the Ext.slider.Tip. Our tip extends hover functionality to the Ext tip. The getText method receives a thumb object with a value property. r=ahocevar (closes #262)
Added: core/trunk/geoext/examples/slidertip.html
===================================================================
--- core/trunk/geoext/examples/slidertip.html (rev 0)
+++ core/trunk/geoext/examples/slidertip.html 2010-09-21 16:52:47 UTC (rev 2383)
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css">
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css">
+ </head>
+
+ <body>
+ <!-- EXAMPLES -->
+ <!--
+ These examples are intended to mimic the Ext Slider examples. Ideally,
+ the GeoExt.SliderTip would be replaced by similar functionality in the
+ Ext.slider.Tip. See the following forum for details:
+ http://www.sencha.com/forum/showthread.php?94903-DISCUSS-Ext.slider.Tip-hover-option
+ -->
+ <h1>GeoExt.SliderTip Examples</h1>
+ <p>The GeoExt.SliderTip extends the Ext.slider.Tip with the ability to display on hover.</p>
+ <p>The source is not minified - see <a href="slidertip.js">slidertip.js</a></p>
+ <h3>Slider with tip</h3>
+ <div id="tip-slider"></div>
+ <br>
+ <h3>Slider with custom tip</h3>
+ <div id="custom-tip-slider"></div>
+ <br>
+ <h3>Slider with tip on drag only (no hover)</h3>
+ <div id="no-hover-tip"></div>
+
+ <h3>Slider with multiple thumbs</h3>
+ <div id="multi-slider-horizontal"></div>
+
+ <h3>Vertical Slider with multiple thumbs</h3>
+ <div id="multi-slider-vertical"></div>
+
+ <!-- extra space for scrolling -->
+ <div style="height:150px;"></div>
+ <script src="../lib/GeoExt/widgets/tips/SliderTip.js"></script>
+ <script src="slidertip.js"></script>
+ </body>
+</html>
Added: core/trunk/geoext/examples/slidertip.js
===================================================================
--- core/trunk/geoext/examples/slidertip.js (rev 0)
+++ core/trunk/geoext/examples/slidertip.js 2010-09-21 16:52:47 UTC (rev 2383)
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2008-2009 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+Ext.onReady(function(){
+
+ new Ext.Slider({
+ renderTo: "tip-slider",
+ width: 214,
+ minValue: 0,
+ maxValue: 100,
+ plugins: new GeoExt.SliderTip()
+ });
+
+ new Ext.Slider({
+ renderTo: "custom-tip-slider",
+ width: 214,
+ increment: 10,
+ minValue: 0,
+ maxValue: 100,
+ plugins: new GeoExt.SliderTip({
+ getText: function(thumb){
+ return String.format("<b>{0}% complete</b>", thumb.value);
+ }
+ })
+ });
+
+ new Ext.Slider({
+ renderTo: "no-hover-tip",
+ width: 214,
+ increment: 10,
+ minValue: 0,
+ maxValue: 100,
+ plugins: new GeoExt.SliderTip({hover: false})
+ });
+
+ new Ext.Slider({
+ renderTo: "multi-slider-horizontal",
+ width : 214,
+ minValue: 0,
+ maxValue: 100,
+ values : [10, 50, 90],
+ plugins : new GeoExt.SliderTip()
+ });
+
+ new Ext.Slider({
+ renderTo : "multi-slider-vertical",
+ vertical : true,
+ height : 214,
+ minValue: 0,
+ maxValue: 100,
+ values : [10, 50, 90],
+ plugins : new GeoExt.SliderTip()
+ });
+});
Modified: core/trunk/geoext/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js
===================================================================
--- core/trunk/geoext/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js 2010-09-21 14:28:40 UTC (rev 2382)
+++ core/trunk/geoext/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js 2010-09-21 16:52:47 UTC (rev 2383)
@@ -69,9 +69,9 @@
/** private: method[getText]
* :param slider: ``Ext.Slider`` The slider this tip is attached to.
*/
- getText: function(slider) {
+ getText: function(thumb) {
var data = {
- opacity: slider.getValue()
+ opacity: thumb.value
};
return this.compiledTemplate.apply(data);
}
Modified: core/trunk/geoext/lib/GeoExt/widgets/tips/SliderTip.js
===================================================================
--- core/trunk/geoext/lib/GeoExt/widgets/tips/SliderTip.js 2010-09-21 14:28:40 UTC (rev 2382)
+++ core/trunk/geoext/lib/GeoExt/widgets/tips/SliderTip.js 2010-09-21 16:52:47 UTC (rev 2383)
@@ -9,7 +9,7 @@
/** api: (define)
* module = GeoExt
* class = SliderTip
- * base_link = `Ext.Tip <http://dev.sencha.com/deploy/dev/docs/?class=Ext.Tip>`_
+ * base_link = `Ext.Tip <http://dev.sencha.com/deploy/dev/docs/?class=Ext.slider.Tip>`_
*/
Ext.namespace("GeoExt");
@@ -30,7 +30,7 @@
*
* Create a slider tip displaying ``Ext.Slider`` values over slider thumbs.
*/
-GeoExt.SliderTip = Ext.extend(Ext.Tip, {
+GeoExt.SliderTip = Ext.extend(Ext.slider.Tip, {
/** api: config[hover]
* ``Boolean``
@@ -45,12 +45,6 @@
*/
minWidth: 10,
- /** api: config[minWidth]
- * ``Number``
- * Minimum width of the tip. Default is 10.
- */
- minWidth: 10,
-
/** api: config[offsets]
* ``Array(Number)``
* A two item list that provides x, y offsets for the tip. Default is
@@ -70,14 +64,8 @@
* Called when the plugin is initialized.
*/
init: function(slider) {
- slider.on({
- dragstart: this.onSlide,
- drag: this.onSlide,
- dragend: this.hide,
- destroy: this.destroy,
- scope: this
- });
- if(this.hover) {
+ GeoExt.SliderTip.superclass.init.apply(this, arguments);
+ if (this.hover) {
slider.on("render", this.registerThumbListeners, this);
}
this.slider = slider;
@@ -87,20 +75,25 @@
* Set as a listener for 'render' if hover is true.
*/
registerThumbListeners: function() {
- // Ext 3.2 slider no longer has a thumb
- var el = this.slider.thumb || this.slider.thumbs[0].tracker.el;
- el.on({
- "mouseover": function() {
- this.onSlide(this.slider);
- this.dragging = false;
- },
- "mouseout": function() {
- if(!this.dragging) {
- this.hide.apply(this, arguments);
- }
- },
- scope: this
- });
+ var thumb, el;
+ for (var i=0, ii=this.slider.thumbs.length; i<ii; ++i) {
+ thumb = this.slider.thumbs[i];
+ el = thumb.tracker.el;
+ (function(thumb, el) {
+ el.on({
+ mouseover: function(e) {
+ this.onSlide(this.slider, e, thumb);
+ this.dragging = false;
+ },
+ mouseout: function() {
+ if (!this.dragging) {
+ this.hide.apply(this, arguments);
+ }
+ },
+ scope: this
+ })
+ }).apply(this, [thumb, el]);
+ }
},
/** private: method[onSlide]
@@ -108,24 +101,9 @@
*
* Listener for dragstart and drag.
*/
- onSlide: function(slider) {
+ onSlide: function(slider, e, thumb) {
this.dragging = true;
- this.show();
- this.body.update(this.getText(slider));
- this.doAutoWidth();
- // Ext 3.2 slider no longer has a thumb
- var el = slider.thumb || slider.thumbs[0].tracker.el;
- this.el.alignTo(el, 'b-t?', this.offsets);
- },
-
- /** api: config[getText]
- * :param slider: ``Ext.Slider``
- *
- * ``Function``
- * Function that generates the string value to be displayed in the tip. By
- * default, the return from slider.getValue() is displayed.
- */
- getText : function(slider) {
- return slider.getValue();
+ return GeoExt.SliderTip.superclass.onSlide.apply(this, arguments);
}
+
});
Modified: core/trunk/geoext/lib/GeoExt/widgets/tips/ZoomSliderTip.js
===================================================================
--- core/trunk/geoext/lib/GeoExt/widgets/tips/ZoomSliderTip.js 2010-09-21 14:28:40 UTC (rev 2382)
+++ core/trunk/geoext/lib/GeoExt/widgets/tips/ZoomSliderTip.js 2010-09-21 16:52:47 UTC (rev 2383)
@@ -73,11 +73,11 @@
/** private: method[getText]
* :param slider: ``Ext.Slider`` The slider this tip is attached to.
*/
- getText: function(slider) {
+ getText: function(thumb) {
var data = {
- zoom: slider.getZoom(),
- resolution: slider.getResolution(),
- scale: Math.round(slider.getScale())
+ zoom: thumb.value,
+ resolution: this.slider.getResolution(),
+ scale: Math.round(this.slider.getScale())
};
return this.compiledTemplate.apply(data);
}
More information about the Commits
mailing list