javascript - Ext JS 头部放置顺序

Question

我想在面板标题中有一个按钮。这是我的代码的一部分:

var dashboardPanel4 = Ext.create('Ext.Panel', {
        renderTo: Ext.getBody(),
        margin: '0 0 50 0',
        glyph: 'xf2a0@FontAwesome',
        layout: {
            type: 'table',
            columns: 4,
            tableAttrs: {
                width: '100%'
            }
        },
        defaults: {
            // applied to each contained panel
            bodyStyle: 'padding:10px',
            border: 0
        },


        title: '<span class="requests" id="requests"><a href="#" style="">Requests</a></span>',

        header: {
            xtype: 'header',
            titlePosition: 0,
            defaults: {
                margin: '0 10px'
            },
            items: [
                {
                    xtype: 'button',
                    text: "Test Button",
                    tooltip: "Add something",
                    iconCls: 'add',
                    handler: Ext.bind(function() {
                    }, this)
                }
            ]
        },

但问题是 fontawesome 图标对齐到正确的位置。有没有办法在这个标题“请求”之前设置 FA 图标。

目前是这样的:

应该是:右侧的 FA 图标、Request 和 Button。

Answer 1

您希望标题中的内容像这样对齐: <icon> <title> <other things>

我会用配置 titlePosition: 1, 来做将标题设置为第二项。接下来需要的是添加图标而不是使用 glyph配置，而是将其作为自己的项目添加到 header 配置中。

所以你会得到这样的东西:

header: {
    xtype: 'header',
    titlePosition: 1,
    items: [{
        xtype: 'image',
        glyph: 'xf2a0@FontAwesome',
    }, {
        xtype: 'button',
        text: "Test Button",
        tooltip: "Add something",
        iconCls: 'add',
        handler: Ext.bind(function () {}, this)
    }]
},

这是 fiddle https://fiddle.sencha.com/#view/editor&fiddle/2h99 ( Font Awesome 图标未在示例中加载)但它应该可以在您自己的代码中使用。

顺便说一句，这个问题可能有更多的解决方案。