How to design sencha radio button

Question

I know how to create radio button in sencha, but i want to know " how to design radio button like below "

enter image description here

With CSS. Also those radio buttons would be a bit small for a touch device. — Titouan de Bailleul, Mar 13 '13 at 08:24
why not use a picker instead of radio buttons? As @TDeBailleul said, 4 radio button won't fit correctly if device width is less. — SachinGutte, Mar 13 '13 at 11:24
That's not what I meant. I was more thinking about the size of the tappable area: http://stackoverflow.com/questions/1928991/minimum-sensible-button-size-on-iphone — Titouan de Bailleul, Mar 13 '13 at 12:21

score 1 · Accepted Answer · answered Mar 13 '13 at 10:03

This is what i did, almost i got it.

Ext.create('Ext.form.Panel', {
    fullscreen: true,

    layout: 'hbox',
    defaults: {
           labelWidth: '50%',
           labelAlign: 'right'
     },

    items: [
        {
            xtype: 'radiofield',
            name : 'color',
            value: 'red',
            label: 'Red',
            checked: true
        },
        {
            xtype: 'radiofield',
            name : 'color',
            value: 'green',
            label: 'Green'
        },
        {
            xtype: 'radiofield',
            name : 'color',
            value: 'blue',
            label: 'Blue'
        }
    ]
});

How to design sencha radio button

1 Answers1