Distância espacial constante entre os elementos do botão de opção

Question

Sou novo em ExtJs e preciso da sua ajuda, pois tenho problemas para resolver isso sozinho.No projeto em que estou trabalhando atualmente usamos os seguintes botões de opção, algo como:

{
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 }
    ]    
}

o número de itens não é constante.

Então, o que está acontecendo é que os botões de opção ocupam todo o espaço disponível e a distância entre os elementos não é constante, é mais ou menos assim que parece

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

o que eu gostaria de ver é uma distância constante, como:

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

alguma idéia de como conseguir isso?

Answer 1

Você pode usar o columns configuração:

Especifica o número de colunas a serem usadas ao exibir agrupadas controles de checkbox/rádio usando layout automático.Essa configuração pode levar Vários tipos de valores:

• 'auto' - Os controles serão renderizados um por coluna em uma linha e A largura de cada coluna será distribuída uniformemente com base na largura do contêiner de campo total.Este é o padrão.
• Número - Se você especificar um número (por exemplo, 3) que o número de colunas será criado e Os controles contidos serão distribuídos automaticamente com base no valor da vertical.
• Matriz - Você também pode especificar uma matriz de coluna larguras, misturando inteiro (largura fixa) e flutuador (largura percentual) valores conforme necessário (por exemplo, [100, .25, .75]).Quaisquer valores inteiros serão renderizado primeiro, então quaisquer valores de flutuação serão calculados como um porcentagem do espaço restante.Os valores de flutuação não precisam somar para 1 (100%), embora se você quiser que os controles ocupem todo o recipiente de campo você deve fazê-lo.

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