Home > DeveloperSection > Articles > Radio Button in Sencha Touch

Radio Button in Sencha Touch


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

Radio Button in Sencha Touch

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

 


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

Follow MindStick