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

 

  Modified On Nov-24-2017 10:17:35 PM

Leave Comment