Distância espacial constante entre os elementos do botão de opção
Pergunta
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?
Solução
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/