How to group Radio Buttons in a Form using Sencha Touch 2

I got a request from one of my reader regarding 'How to group Radio Buttons in a Form'. We are going to create Gender Field with two radio options (Male and Female). Let's see the implementation.

Implementation:

First, We are going to create a container view component with className and aliasName set as 'RadioContainer'. Layout configuration is set to 'hbox', which will position the  container items horizontally.  Next, we are going add child items to the container using items configuration. This configuration contains label component and another container view component.


Flex configuration value 1 and 3 refers to label component will take one fourth of space and container will take remaning three fourth of space. Inside Container view component, we are going to add two radio buttons (Male, Female).

Ext.define('MyApp.view.RadioContainer', {
    extend: 'Ext.Container',
    alias: 'widget.RadioContainer',

    config: {
        height: '25%',
        layout: {
            type: 'hbox'
        },
        items: [
            {
                xtype: 'label',
                flex: 1,
                html: 'Sex:',
                style: 'text-align:center;position:relative;top:25%;'
            },
            {
                xtype: 'container',
                flex: 3,
                items: [
                    {
                        xtype: 'radiofield',
                        label: 'Male',
                        labelWrap: true,
                        name: 'male'
                    },
                    {
                        xtype: 'radiofield',
                        label: 'Female',
                        labelWrap: true,
                        name: 'female'
                    }
                ]
            }
        ]
    }

});

Following is the output, when i run the above code in Google Chrome.

Hope, you enjoyed this Post.