articles

Home / DeveloperSection / Articles / Radio Button in Sencha Touch

Radio Button in Sencha Touch

Sumit Kesarwani 9454 20-Jun-2013

In this article, I’m explaining the radio button in sencha touch and how to use it.

The radio field is an enhanced version of the native browser radio controls and is a good way of allowing your user to choose one option out of a selection 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

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

Radio Button in Sencha Touch

 


Updated 07-Sep-2019

Leave Comment

Comments

Liked By