右对齐面板内的按钮 ExtJS 5

Question

我有一个面板设置为 HBOX。我里面有几个控件。一个标签，两个单选按钮和一个按钮。我希望 Label 和 Radio 按钮左对齐，按钮右对齐。这是我到目前为止的代码。任何帮助都会很棒。谢谢

{
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

添加一个 spacer 组件（flex 1），它将填充任何剩余的 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'
    }]
}

右对齐面板内的按钮 ExtJS 5

Right Align a Button Inside A Panel ExtJS 5

extjs

extjs-mvc