ExtJS 4.2 fieldcontainer vbox 레이아웃

Question

필드 컨테이너가 있는 양식이 있습니다. layout: {type:'vbox'}.

두 개의 필드를 같은 줄에 배치해야 하지만 radiogroup 올바르게 정렬되지 않았습니다.(이해를 돕기 위해 이미지를 첨부했습니다.)

양식 코드는 다음과 같습니다.

{
    xtype: 'datefield',
    fieldLabel: 'Date',
    format: 'd/m/Y',
    submitFormat: 'Y-m-d H:i:s',
    allowBlank: false,
    disabled: true,
    value: new Date()
}, {
    xtype: 'fieldcontainer',
    fieldLabel: 'Type',
    combineErrors: true,
    defaults: {
        hideLabel: true
    },
    layout: {
        type: 'vbox'
    },
    items: [{
        xtype: 'combobox',
        width: 90,
        store: Ext.create('HolidayType', {
            autoLoad: true
        }),
        displayField: 'Description',
        valueField: 'HolidayTypeId',
        queryMode: 'local',
        allowBlank: false,

    }, {
        xtype: 'radiogroup',
        columns: 2,
        items: [{
                boxLabel: 'Official',
                name: 'RequestInAdvance',
                inputValue: 0,
                checked: true
            }, {
                boxLabel: 'Personal',
                name: 'RequestInAdvance',
                inputValue: 1
            }

        ]
    }]

}, {
    xtype: 'radiogroup',
    fieldLabel: 'Request',
    anchor: '70%',
    columns: 2,
    items: [{
            boxLabel: 'Payable',
            name: 'Request',
            inputValue: 0,
            checked: true
        }, {
            boxLabel: 'Non Payable',
            name: 'Request',
            inputValue: 1
        }

    ]
},

욕망의 행동을 어떻게 얻을 수 있는지에 대한 단서가 있습니까?

업데이트

Sencha 바이올린은 다음과 같습니다. https://fiddle.sencha.com/#fiddle/8ch

Answer 1

열 또는 전체 라디오 그룹의 너비를 지정해야 합니다.

xtype: 'radiogroup',
width: 200,
columns: 2,
items: [
    { boxLabel: 'Official', name: 'Request1', inputValue: 0, checked: true },
    { boxLabel: 'Personal', name: 'Request1', inputValue: 1 }
]

바이올린을 확인해보세요: https://fiddle.sencha.com/#fiddle/8cj

Answer 2

해결됨:

해결책은 각 라디오 항목에 고정된 너비 또는 플렉스를 할당하는 것이었습니다.

바이올린은 다음과 같습니다. https://fiddle.sencha.com/#fiddle/8ci

items: [{
        boxLabel: 'Official',
        width: 80,
        padding: '0 0 0 22',
        name: 'Request1',
        inputValue: 0,
        checked: true
    }, {
        boxLabel: 'Personal',
        flex: 1,
        name: 'Request1',
        inputValue: 1
    }

]