右对齐面板 ExtJS 5 内的按钮

Posted 2023-02-26

【中文标题】右对齐面板 ExtJS 5 内的按钮

【英文标题】：Right Align a Button Inside A Panel ExtJS 5

【发布时间】：2015-02-25 10:54:03

【问题描述】：

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

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'
]

【参考方案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'
    ]

【讨论】：

感谢您的帮助。