2 * @class Ext.slider.Tip
4 * Simple plugin for using an Ext.tip.Tip with a slider to show the slider value. In general this
5 * class is not created directly, instead pass the {@link Ext.slider.Multi#useTips} and
6 * {@link Ext.slider.Multi#tipText} configuration options to the slider directly.
7 * {@img Ext.slider.Tip/Ext.slider.Tip1.png Ext.slider.Tip component}
10 Ext.create('Ext.slider.Single', {
15 renderTo: Ext.getBody()
18 * Optionally provide your own tip text by passing tipText:
20 new Ext.slider.Single({
25 tipText: function(thumb){
26 return Ext.String.format('<b>{0}% complete</b>', thumb.value);
32 Ext.define('Ext.slider.Tip', {
33 extend: 'Ext.tip.Tip',
35 alias: 'widget.slidertip',
40 init: function(slider) {
45 dragstart: me.onSlide,
53 * Called whenever a dragstart or drag event is received on the associated Thumb.
54 * Aligns the Tip with the Thumb's new position.
55 * @param {Ext.slider.MultiSlider} slider The slider
56 * @param {Ext.EventObject} e The Event object
57 * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to
59 onSlide : function(slider, e, thumb) {
62 me.update(me.getText(thumb));
63 me.doComponentLayout();
64 me.el.alignTo(thumb.el, 'b-t?', me.offsets);
68 * Used to create the text that appears in the Tip's body. By default this just returns
69 * the value of the Slider Thumb that the Tip is attached to. Override to customize.
70 * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to
71 * @return {String} The text to display in the tip
73 getText : function(thumb) {
74 return String(thumb.value);