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
Select a radio button and tap on the Get Value button , you will get a message like this:
Leave a Comment