---
title: "Radio Button in Sencha Touch"  
description: "In this article, I’m explaining the radio button in sencha touch and how to use it."  
author: "Sumit Kesarwani"  
published: 2013-06-20  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1343/radio-button-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 4 minutes  

---

# Radio Button 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 [radio button](https://www.mindstick.com/articles/12743/radio-button-in-android) in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme) and how to use it.\

The radio field is an [enhanced](https://answers.mindstick.com/qa/104149/cenforce-unveiling-the-little-known-secret-to-enhanced-performance) [version](https://www.mindstick.com/articles/12845/things-to-remember-while-migrating-odoo-to-a-better-version) of the native [browser](https://www.mindstick.com/articles/323165/top-10-fastest-internet-browsers-in-the-world) radio [controls](https://www.mindstick.com/articles/66/how-to-create-controls-at-run-time-in-csharp-dot-net) and is a good way of allowing your user to [choose one](https://www.mindstick.com/forum/159291/what-are-some-popular-alternatives-to-mern-stacks-and-when-you-should-choose-one-over-the-other) option out of a [selection](https://www.mindstick.com/blog/60/populate-records-in-second-listbox-according-to-the-selection-in-first-list-box) of several.

##### Example

Firstly drag-n-drop the form panel to the canvas, add toolbar to the form panel and a button to the toolbar. Add a fieldset with three radio buttons.

```
Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',
 
    config: {
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Radio Button',
                items: [
                    {
                        xtype: 'button',
                        id: 'GetValue',
                        itemId: 'mybutton',
                        text: 'Get Value'
                    }
                ]
            },
            {
                xtype: 'fieldset',
                instructions: 'Please select a centre',
                title: 'Centre :',
                items: [
                    {
                        xtype: 'radiofield',
                        id: 'AllahabadRadioButton',
                        label: 'Allahabad',
                        name: 'Centre',
                        value: 'Allahabad',
                        checked: true
                    },
                    {
                        xtype: 'radiofield',
                        id: 'KanpurRadioButton',
                        label: 'Kanpur',
                        name: 'Centre',
                        value: 'Kanpur'
                    },
                    {
                        xtype: 'radiofield',
                        id: 'LucknowRadioButton',
                        label: 'Lucknow',
                        name: 'Centre',
                        value: 'Lucknow'
                    }
                ]
            }
        ],
        listeners: [
            {
                fn: 'onGetValueTap',
                event: 'tap',
                delegate: '#GetValue'
            }
        ]
    },
 
    onGetValueTap: function(button, e, eOpts) {
        var centre = Ext.ComponentQuery.query('radiofield[name=Centre]');
        Ext.Msg.alert('Selected Centre', centre[0].getGroupValue());
    }
});
```

Output

![Radio Button in Sencha Touch](https://www.mindstick.com/mindstickarticle/56bc0549-243a-40f9-83d4-63161fe68e38/images/0286be3a-331f-4d60-84d4-e106891665ce.png)

Select a radio button and tap on the Get Value button , you will get a message like this:

![Radio Button in Sencha Touch](https://www.mindstick.com/mindstickarticle/56bc0549-243a-40f9-83d4-63161fe68e38/images/d94e0a07-6ecd-4b10-87c1-f7010709cdd9.png)

---

Original Source: https://www.mindstick.com/articles/1343/radio-button-in-sencha-touch

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