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图标，右侧的请求和按钮。

Answer 1

您希望在标题中对齐的内容如下： <icon> <title> <other things>

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

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

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)
    }]
},

这是小提琴https://fiddle.sencha.com/#view/editor&fiddle/2h99（示例中未加载字体真棒图标）但它应该在您自己的代码中工作。

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

Ext JS标题放置顺序

1 个答案: