Right Align a Button Inside A Panel ExtJS 5

Question

I have a panel set to be an HBOX. I have a couple controls inside it. A Label, two radio buttons and a button. I want the Label and Radio buttons to be left aligned and the button to be right aligned. Here is the code I have so far. Any assistance would be wonderful. Thanks.

{
xtype: 'panel',
layout: 'hbox',
border: false,
items: [
    { xtype: 'displayfield', value:'Type:', margin:'0 10 0 0' },
    { xtype:'radio', boxLabel  : 'Type A', tag: null, margin:'0 10 0 0'},
    { xtype:'radio', boxLabel  : 'Type B', tag:null, },
    { xtype: 'button', iconCls: 'myclsIcon'}
]
}

Answer 1

Add a spacer component (flex 1) that will fill up any remaining space:

{
    xtype: 'panel',
    layout: 'hbox',
    border: false,
    items: [{
        xtype: 'displayfield',
        value: 'Type:',
        margin: '0 10 0 0'
    }, {
        xtype: 'radio',
        boxLabel: 'Type A',
        tag: null,
        margin: '0 10 0 0'
    }, {
        xtype: 'radio',
        boxLabel: 'Type B',
        tag: null,
    }, {
        xtype: 'component',
        flex: 1
    }, {
        xtype: 'button',
        iconCls: 'myclsIcon'
    }]
}