ExtJS 3.4 Radiogroup strech turn off

Question

I have the problem with set the width each radio button in the radio group.

xtype: 'container',
id: 'cntCompany',
layout: 'hbox',
fieldLabel: 'Company',
items: [
    {
        xtype: 'radiogroup',
        id: 'rdogrpCompany',
        items: [
            { id: 'rdoIT', boxLabel: 'IT', name: 'rdoCompany', inputValue: 'IT', width: 40, checked: true },
            { id: 'rdoCOMMS', boxLabel: 'COMMS', name: 'rdoCompany', width: 40, inputValue: 'Comms' },
            { id: 'rdoGROUP', boxLabel: 'GROUP', name: 'rdoCompany', width: 40, inputValue: 'Group' },
            { id: 'rdoALL', boxLabel: 'ALL', name: 'rdoCompany', width: 40, inputValue: 'All', margins: '0 0 0 30' }
        ]
    }
]

I set the width each radio button but it is not working properly. Why this radiogroup strech as same width column and ignore width: 40? How I set the width for each radio button?

Answer 1

By default Combo-Group / Radio-Group is using the column Layout to align the grouped elements. and that uses 'auto' as default value if nothing else is set.

The controls will be rendered one per column on one row and the width of each column will be evenly distributed based on the width of the overall field container. This is the default.

Based on the API it is a Layout problem. Note that ExtJS uses default Layouts if you don't define one. So change either the layout or try if columns: 1 solve your issue.

API-Link

EDIT: Based on the comment the correct answer is columns: [40, 40, 40, 40]