Home > DeveloperSection > Articles > Slider Field in Sencha Touch

Slider Field in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 3533  View(s)
Rate this:

Slider Field in Sencha Touch

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() + ']');

    }

});

 

Output

Slider Field in Sencha Touch

When you change the location of thumbs, the value change in the title of toolbar:

Slider Field in Sencha Touch

Unchecking the Allow Thumb OverLapping checkbox will not allow the thumbs to overlap:

Slider Field in Sencha Touch

Checking the Allow Thumb OverLapping checkbox will allow the thumbs to overlap:

Slider Field in Sencha Touch


Don't want to miss updates? Please click the below button!

Follow MindStick