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

添加一个填充任何剩余空间的间隔组件（flex 1）：

{
    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中的按钮

1 个答案: