Home > DeveloperSection > Articles > Toggle Field in Sencha Touch

Toggle Field in Sencha Touch


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

Toggle Field in Sencha Touch

In this article, I’m explaining the toggle field in sencha touch and how to use it in our application.

Toggle field is a specialized Ext.field.Slider with a single thumb which only supports two values either 0 or 1.

Example

Ext.define('MyApp.view.MyFormPanel', {

    extend: 'Ext.form.Panel',

 

    config: {

        id: 'FormPanel',

        items: [

            {

                xtype: 'toolbar',

                docked: 'top',

                items: [

                    {

                        xtype: 'segmentedbutton',

                        id: 'ToolbarSegmentedButton',

                        itemId: 'mysegmentedbutton',

                        items: [

                            {

                                xtype: 'button',

                                id: 'Toggle',

                                itemId: 'mybutton',

                                text: 'Toggle'

                            },

                            {

                                xtype: 'button',

                                id: 'setValue',

                                itemId: 'mybutton1',

                                text: 'setValue(0)'

                            },

                            {

                                xtype: 'button',

                                id: 'setValue1',

                                itemId: 'mybutton2',

                                text: 'setValue(1)'

                            }

                        ]

                    }

                ]

            },

            {

                xtype: 'fieldset',

                title: '',

                items: [

                    {

                        xtype: 'togglefield',

                        id: 'ToggleField',

                        label: 'Toggle Field :'

                    }

                ]

            }

        ],

        listeners: [

            {

                fn: 'onToggleTap',

                event: 'tap',

                delegate: '#Toggle'

            },

            {

                fn: 'onSetValueTap',

                event: 'tap',

                delegate: '#setValue'

            },

            {

                fn: 'onSetValue1Tap',

                event: 'tap',

                delegate: '#setValue1'

            },

            {

                fn: 'onToolbarSegmentedButtonToggle',

                event: 'toggle',

                delegate: '#ToolbarSegmentedButton'

            }

        ]

    },

 

    onToggleTap: function(button, e, eOpts) {

        Ext.getCmp('ToggleField').toggle();

    },

 

    onSetValueTap: function(button, e, eOpts) {

        Ext.getCmp('ToggleField').setValue(0);

    },

 

    onSetValue1Tap: function(button, e, eOpts) {

        Ext.getCmp('ToggleField').setValue(1);

    },

 

    onToolbarSegmentedButtonToggle: function(segmentedbutton, button, isPressed, eOpts) {

        segmentedbutton.setPressedButtons([]);

    }

});

 

Output

Toggle Field in Sencha Touch

When you click/tap on the Toggle button, the value toggles from 0 to 1 and same functionality you can have by tapping on setValue(0) and setValue(1) buttons.

Toggle Field in Sencha Touch


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

Follow MindStick