Constant space distance between radio button's elements

Question

I'm new to ExtJs and I need your help, cause I have troubles solving it on my own. In the project I'm currently working on we use the following radio buttons, something like:

{
xtype: 'radiogroup'
, fieldLabel: 'ROW Periodicity'
, name: 'rowPeriodicity'
, width: 700
, allowBlank: false
, vertical: false
, disabledCls: 'ux-item-disabled'
, items: [
    { name: 'rowPeriodicityCode' , boxLabel: '6 months' , inputValue: 'M6' }
    , { name: 'rowPeriodicityCode' , boxLabel: 'Annual' , inputValue: 'Y1' }
    , { name: 'rowPeriodicityCode' , boxLabel: '3-Yearly' , inputValue: 'Y3' }
    , { name: 'rowPeriodicityCode' , boxLabel: 'N/A' , inputValue: 'N_A' }
    , { name: 'rowPeriodicityCode' , boxLabel: 'Other' , inputValue: 'OTHER }
    ]    
}

the number of items is not constant.

So, what's happening is that the radio buttons take the whole available space and the distance between elements is not constant, this is more or less how it looks

| x     x     x     x     x |
| x       x       x       x |       
| x           x           x |  

what I would like to see is a constant distance, like:

| x  x  x  x  x             |
| x  x  x  x                |       
| x  x  x                   |  

any ideas how to achieve that?

Answer 1

You can use the columns config:

Specifies the number of columns to use when displaying grouped checkbox/radio controls using automatic layout. This config can take several types of values:

• 'auto' - 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.
• Number - If you specific a number (e.g., 3) that number of columns will be created and the contained controls will be automatically distributed based on the value of vertical.
• Array - You can also specify an array of column widths, mixing integer (fixed width) and float (percentage width) values as needed (e.g., [100, .25, .75]). Any integer values will be rendered first, then any float values will be calculated as a percentage of the remaining space. Float values do not have to add up to 1 (100%) although if you want the controls to take up the entire field container you should do so.

Example: http://jsfiddle.net/9ZDsK/