extjs - 在 ext 选项卡面板中添加图像

Question

我是 ext js 的新手。如何在 ext 选项卡面板的标题中添加图像作为我的应用程序的徽标？

以下是我的代码：-

Ext.define('MyApp.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
requires: [

'MyApp.view.main.MainController',
'MyApp.view.main.MainModel',
'MyApp.view.main.List'
],
controller: 'main',
viewModel: 'main',
defaults: {
styleHtmlContent: true
},
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'fa-home',
layout: 'fit',
items: [{
xtype: 'mainlist'
}]
}
]
});

我需要添加一个徽标来代替显示为标题的“myapp”。我想要它类似于下图：-

Answer 1

为了回答这个问题，我在 Extjs6 中创建了一个新应用程序并进行了一些修改，如下所示以获得徽标。

将图像和 css 放在资源文件夹中，然后在 css 文件中添加下面的 css。

.my-logo-icon {
background-image: url(../images/newpowered.gif) !important;

}

然后将 css 路径放在 app.json 中以获取 css。

{
 "path": "resources/css/styles.css"
}

现在在你的代码中在 iconCls 调用这个 css

iconCls: 'my-logo-icon'

完整的代码是

Ext.define('MyApp.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
requires: [
    'Ext.plugin.Viewport',
    'Ext.window.MessageBox',
    'MyApp.view.main.MainController',
    'MyApp.view.main.MainModel',
    'MyApp.view.main.List'
],
controller: 'main',
viewModel: 'main',
ui: 'navigation',
tabBarHeaderPosition: 1,
titleRotation: 0,
tabRotation: 0,
header: {
    layout: {
        align: 'stretchmax'
    },
    title: {

        flex: 0
    },
    iconCls: 'my-logo-icon'
},
tabBar: {
    flex: 1,
    layout: {
        align: 'stretch',
        overflowHandler: 'none'
    }
},
responsiveConfig: {
    tall: {
        headerPosition: 'top'
    },
    wide: {
        headerPosition: 'left'
    }
},
defaults: {
    bodyPadding: 20,
    tabConfig: {
        plugins: 'responsive',
        responsiveConfig: {
            wide: {
                iconAlign: 'left',
                textAlign: 'left'
            },
            tall: {
                iconAlign: 'top',
                textAlign: 'center',
                width: 120
            }
        }
    }
},
items: [{
    title: 'Home',
    iconCls: 'fa-home',
    // The following grid shares a store with the classic version's grid as well!
    items: [{
        xtype: 'mainlist'
    }]
}, {
    title: 'Users',
    iconCls: 'fa-user',
    bind: {
        html: '{loremIpsum}'
    }
}, {
    title: 'Groups',
    iconCls: 'fa-users',
    bind: {
        html: '{loremIpsum}'
    }
}, {
    title: 'Settings',
    iconCls: 'fa-cog',
    bind: {
        html: '{loremIpsum}'
    }
}]});

输出图像是

Answer 2

你也可以这样做：

items       : [{
        title     : "<img src='../resources/images/whatever.png'>",
        xtype     : 'home-page',
        bodyCls   : 'menu-tabs' // optional

    }, {

}]

如果您希望标签更高一点，只需将其用作 css

div[class~="menu-tabs"] div[class~="x-box-scroller-body-vertical"] div[class~="x-box-target"] a[class~="x-tab-default"] span[class~="x-tab-wrap-default"] span[class~="x-tab-button-default"]{
    height: 50px;
}