---
title: "Toggle Field in Sencha Touch"  
description: "In this article, I’m explaining the toggle field in sencha touch and how to use it in our application."  
author: "Sumit Kesarwani"  
published: 2013-06-22  
updated: 2020-07-14  
canonical: https://www.mindstick.com/articles/1351/toggle-field-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 5 minutes  

---

# Toggle Field in Sencha Touch

In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370), I’m explaining the [toggle](https://www.mindstick.com/forum/12682/jquery-toggle-if-statement) [field](https://answers.mindstick.com/qa/38534/name-the-multinational-field-training-exercise-ftx-involving-asean-plus-countries-which-commenced-at-pune-on-02-03-2016-displaying-true-jointmanship-and-team-spirit) in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme) and how to use it in our application.\

Toggle field is a [specialized](https://yourviews.mindstick.com/audio/1209/caregivers-support-personnel-s-function-in-specialized-disability-accommodation) Ext.field.Slider with a single thumb which only [supports](https://www.mindstick.com/blog/12043/how-to-create-a-killer-mobile-app-that-supports-your-brand) two [values](https://www.mindstick.com/forum/159360/how-to-write-sql-query-to-join-comma-separated-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](https://www.mindstick.com/interview/34427/explain-the-output-in-angular)

![Toggle Field in Sencha Touch](https://www.mindstick.com/mindstickarticle/9b729b2f-3c11-44a4-aeb4-28c530d4c93b/images/588fc694-e725-49c6-a865-b7364d25670a.png)

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](https://www.mindstick.com/mindstickarticle/9b729b2f-3c11-44a4-aeb4-28c530d4c93b/images/263e9646-16b8-4ad1-9478-8c5226012178.png)

---

Original Source: https://www.mindstick.com/articles/1351/toggle-field-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.