Clear Up
SharpKit Reference

Slider Class

Namespace: Ext.field

Base Types

System.Object

Constructors

Properties

Name Description
alias The slider is a way to allow the user to select a value from a given numerical range. You might use it for choosing a percentage, combine two of them to get min and max values, or use three of them to specify the hex values for a color. Each slider contains a single 'thumb' that can be dragged along the slider's length to change the value. Sliders are equally useful inside {@link Ext.form.Panel forms} and standalone. Here's how to quickly create a slider in form, in this case enabling a user to choose a percentage: * Ext.create('Ext.form.Panel', { items: [ { xtype: 'sliderfield', label: 'Percentage', value: 50, {@link #minValue}: 0, {@link #maxValue}: 100 } ] }); * In this case we set a starting value of 50%, and defined the min and max values to be 0 and 100 respectively, giving us a percentage slider. Because this is such a common use case, the defaults for {@link #minValue} and {@link #maxValue} are already set to 0 and 100 so in the example above they could be removed. * It's often useful to render sliders outside the context of a form panel too. In this example we create a slider that allows a user to choose the waist measurement of a pair of jeans. Let's say the online store we're making this for sells jeans with waist sizes from 24 inches to 60 inches in 2 inch increments - here's how we might achieve that: * var slider = Ext.create('Ext.field.Slider', { label: 'Waist Measurement', minValue: 24, maxValue: 60, increment: 2, value: 32 }); * Now that we've got our slider, we can ask it what value it currently has and listen to events that it fires. For example, if we wanted our app to show different images for different sizes, we can listen to the {@link #change} event to be informed whenever the slider is moved: * slider.on('change', function(newValue, oldValue) { if (newValue > 40) { imgComponent.setSrc('large.png') } else { imgComponent.setSrc('small.png'); } }, this); * Here we listened to the {@link #change} event on the slider and updated the background image of an {@link Ext.Img image component} based on what size the user selected. Of course, you can use any logic inside your event listener.
alternateClassName
extend The slider is a way to allow the user to select a value from a given numerical range. You might use it for choosing a percentage, combine two of them to get min and max values, or use three of them to specify the hex values for a color. Each slider contains a single 'thumb' that can be dragged along the slider's length to change the value. Sliders are equally useful inside {@link Ext.form.Panel forms} and standalone. Here's how to quickly create a slider in form, in this case enabling a user to choose a percentage: * Ext.create('Ext.form.Panel', { items: [ { xtype: 'sliderfield', label: 'Percentage', value: 50, {@link #minValue}: 0, {@link #maxValue}: 100 } ] }); * In this case we set a starting value of 50%, and defined the min and max values to be 0 and 100 respectively, giving us a percentage slider. Because this is such a common use case, the defaults for {@link #minValue} and {@link #maxValue} are already set to 0 and 100 so in the example above they could be removed. * It's often useful to render sliders outside the context of a form panel too. In this example we create a slider that allows a user to choose the waist measurement of a pair of jeans. Let's say the online store we're making this for sells jeans with waist sizes from 24 inches to 60 inches in 2 inch increments - here's how we might achieve that: * var slider = Ext.create('Ext.field.Slider', { label: 'Waist Measurement', minValue: 24, maxValue: 60, increment: 2, value: 32 }); * Now that we've got our slider, we can ask it what value it currently has and listen to events that it fires. For example, if we wanted our app to show different images for different sizes, we can listen to the {@link #change} event to be informed whenever the slider is moved: * slider.on('change', function(newValue, oldValue) { if (newValue > 40) { imgComponent.setSrc('large.png') } else { imgComponent.setSrc('small.png'); } }, this); * Here we listened to the {@link #change} event on the slider and updated the background image of an {@link Ext.Img image component} based on what size the user selected. Of course, you can use any logic inside your event listener.
ThumbsDisabled @private Loops through each of the sliders {@link #thumbs} and calls disable/enable on each of them depending on the param specified. @param {Boolean} disable True to disable, false to enable
Value

Methods

Name Description
applyIncrement(object)
applyThumbs(object)
applyValue(object)
constrain(JsNumber) @private Takes a desired value of a thumb and returns the nearest snap value. e.g if minValue = 0, maxValue = 100, increment = 10 and we pass a value of 67 here, the returned value will be 70. The returned number is constrained within {@link minValue} and {@link maxValue}, so in the above example 68 would be returned if {@link maxValue} was set to 68. @param {Number} value The value to snap @return {Number} The snapped value
disable() Disables the slider
enable() Enables the slider
getClosestThumb(object) Finds the closest thumb for a specified value @return {Ext.field.slider.Thumb} The thumb
getOffsetForValue(object) Returns the correct offset for a specified value, based on the {@link #minWidth}, {@link #maxWidth} and {@link #increment} configurations @private
getThumb(JsNumber) Returns an instance of a thumb for a specifed index @param {Number} index The index of the thumb (defaults to 0) @return {Ext.field.slider.Thumb} The thumb instance
getValue()
getValueForOffset(object, object) Returns the correct value for a specified offset, based on the {@link #minWidth}, {@link #maxWidth} and {@link #increment} configurations. Rerverse of {@link #getOffsetForValue} @private
getValues() Convience method. Calls {@link #getValue}
indexOf(Thumb) Returns the index of a specified thumb @param {Ext.field.slider.Thumb} thumb @return {Number} Index of the thumb
initialize()
onChange(object, object) Called when the value of any child {@link #thumbs} changes. @private
onPainted()
onSizeChange()
onTap(object)
refreshThumbs()
reset()
setThumbsDisabled(bool) @private Loops through each of the sliders {@link #thumbs} and calls disable/enable on each of them depending on the param specified. @param {Boolean} disable True to disable, false to enable
setValue(object)
setValues() Convience method. Calls {@link #setValue}
updateIncrement(object)
updateMaxValue(object)
updateMinValue(object)
updateThumbs(object)
updateValue(object) Updates the slides {@link #thumbs} with their new value(s)
© Copyright 2005-2011 SharpKit. All rights reserved.