ExtJS 3.4 Stretch Radio Group Turns Off

Question

I have a problem setting the width of each radio button in a 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 of each switch, but it does not work properly. Why is this radio group stretched as a single column of width and ignores the width: 40? How to set the width for each switch?

Answer 1

By default, Combo-Group / Radio-Group uses the Layout column to align grouped items. and the default value is "auto" if nothing is set.

The controls will be displayed one column at a time in the row and the width of each column will be evenly distributed based on the width of the common container field. This is the default value.

Based on the API, this is a layout issue. Note that ExtJS uses default layouts if you do not define it. Therefore, change the layout or try if columns: 1 solve your problem.

API link

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