Ext JS面板头部布局调整：FontAwesome图标需前置标题

我帮你调整代码来实现「FontAwesome图标、标题、按钮居右」的布局，核心是修改header的布局方式，把图标和标题都纳入header的items中进行精准控制：

修改后的完整代码片段 #

var dashboardPanel4 = Ext.create('Ext.Panel', {
    renderTo: Ext.getBody(),
    margin: '0 0 50 0',
    layout: {
        type: 'table',
        columns: 4,
        tableAttrs: { width: '100%' }
    },
    defaults: {
        bodyStyle: 'padding:10px',
        border: 0
    },
    // 移除原来的title和glyph配置，统一放到header的items里管理
    header: {
        xtype: 'header',
        layout: {
            type: 'hbox',
            align: 'center' // 让所有元素垂直居中
        },
        items: [
            // 前置的FontAwesome图标
            {
                xtype: 'label',
                glyph: 'xf2a0@FontAwesome',
                margin: '0 10px 0 0' // 图标和标题之间留间距
            },
            // 标题文本，用flex:1占据中间剩余空间，把按钮挤到右侧
            {
                xtype: 'label',
                html: '<span class="requests" id="requests"><a href="#" style="">Requests</a></span>',
                flex: 1
            },
            // 居右的测试按钮
            {
                xtype: 'button',
                text: "Test Button",
                tooltip: "Add something",
                iconCls: 'add',
                handler: Ext.bind(function() {
                    // 这里写你的按钮点击逻辑
                }, this),
                margin: '0 10px 0 0'
            }
        ]
    }
});

关键修改点说明 #

• 移除原glyph和title：原来的面板glyph默认会显示在标题右侧，我们把图标和标题都放到header的items里，更灵活控制顺序。
• 使用hbox布局：header设置为水平盒子布局，让元素按横向排列。
• flex:1控制标题占位：标题元素设置flex:1，会自动占据图标和按钮之间的所有剩余空间，从而把按钮推到最右侧。
• 垂直居中对齐：通过layout.align:'center'确保图标、标题、按钮在垂直方向上居中对齐，视觉更协调。

这样调整后，就能实现你想要的「图标在前，标题在中，按钮居右」的头部布局啦~

内容的提问来源于stack exchange，提问作者harunB10