In this article, I’m explaining the slider field in sencha touch and how to use it our application.
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 forms and standalone.
Example
Ext.define('MyApp.view.MyFormPanel', {
extend: 'Ext.form.Panel',
config: {
fullscreen: true,
items: [
{
xtype: 'titlebar',
docked: 'top',
id: 'SliderValueToolbar',
title: 'value=[25,75]'
},
{
xtype: 'fieldset',
title: '',
items: [
{
xtype: 'checkboxfield',
id: 'OverlappingCkeckBox',
itemId: 'mycheckbox',
label: 'Allow Thumb OverLapping :',
checked: true
},
{
xtype: 'sliderfield',
id: 'SliderField',
itemId: 'mysliderfield',
component: {
allowThumbsOverlapping: true
},
label: 'Slider Field',
value: [
25,
75
]
}
]
}
],
listeners: [
{
fn: 'onOverlappingCkeckBoxCheck',
event: 'check',
delegate: '#OverlappingCkeckBox'
},
{
fn: 'onOverlappingCkeckBoxUncheck',
event: 'uncheck',
delegate: '#OverlappingCkeckBox'
},
{
fn: 'onSliderFieldChange',
event: 'change',
delegate: '#SliderField'
}
]
},
onOverlappingCkeckBoxCheck: function(checkboxfield, e, eOpts) {
Ext.getCmp('SliderField').getComponent().setAllowThumbsOverlapping(true);
},
onOverlappingCkeckBoxUncheck: function(checkboxfield, e, eOpts) {
Ext.getCmp('SliderField').getComponent().setAllowThumbsOverlapping(false);
},
onSliderFieldChange: function(me, sl, thumb, newValue, oldValue, eOpts) {
var slider= Ext.getCmp('SliderField');
Ext.getCmp('SliderValueToolbar').setTitle('values = [' + slider.getValues() + ']');
}
});
When you change the location of thumbs, the value change in the title of toolbar:
Unchecking the Allow Thumb OverLapping checkbox will not allow the thumbs to overlap:
Checking the Allow Thumb OverLapping checkbox will allow the thumbs to overlap:
Leave a Comment