/*! * Ext JS Library 3.4.0 * Copyright(c) 2006-2011 Sencha Inc. * licensing@sencha.com * http://www.sencha.com/license */ /** * @class Ext.slider.Tip * @extends Ext.Tip * Simple plugin for using an Ext.Tip with a slider to show the slider value. Example usage:
new Ext.Slider({ width: 214, minValue: 0, maxValue: 100, plugins: new Ext.slider.Tip() });* Optionally provide your own tip text by overriding getText:
new Ext.Slider({ width: 214, minValue: 0, maxValue: 100, plugins: new Ext.slider.Tip({ getText: function(thumb){ return String.format('{0}% complete', thumb.value); } }) });*/ Ext.slider.Tip = Ext.extend(Ext.Tip, { minWidth: 10, offsets : [0, -10], init: function(slider) { slider.on({ scope : this, dragstart: this.onSlide, drag : this.onSlide, dragend : this.hide, destroy : this.destroy }); }, /** * @private * Called whenever a dragstart or drag event is received on the associated Thumb. * Aligns the Tip with the Thumb's new position. * @param {Ext.slider.MultiSlider} slider The slider * @param {Ext.EventObject} e The Event object * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to */ onSlide : function(slider, e, thumb) { this.show(); this.body.update(this.getText(thumb)); this.doAutoWidth(); this.el.alignTo(thumb.el, 'b-t?', this.offsets); }, /** * Used to create the text that appears in the Tip's body. By default this just returns * the value of the Slider Thumb that the Tip is attached to. Override to customize. * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to * @return {String} The text to display in the tip */ getText : function(thumb) { return String(thumb.value); } }); //backwards compatibility - SliderTip used to be a ux before 3.2 Ext.ux.SliderTip = Ext.slider.Tip;