Search code examples
extjsextjs4extjs4.1extjs4.2extjs-mvc

ExtJS 4.2 fieldcontainer vbox layout


I have a form that has a fieldcontainer with layout: {type:'vbox'}.

I need to place two fields in the same line but the radiogroup is not aligned correctly. (I have attached the image for better understanding).

enter image description here

The form code is the following:

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

    ]
},

Any clue on how can I get the desire behavior?

UPDATE

Here is the sencha fiddle: https://fiddle.sencha.com/#fiddle/8ch


Solution

  • You need to specify a width for either your columns or the entire radio group:

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

    Check out the fiddle: https://fiddle.sencha.com/#fiddle/8cj