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'
}]
}
]
});

我需要添加一个徽标代替＆＃39; myapp＆＃39;这是标题。我想要它像下面的图像： -

Answer 1

要回答这个问题，我在Extjs6中创建了一个新的应用程序并进行了一些修改，以便获取徽标。

将图片和css放在资源文件夹中，然后在css文件中添加以下css。

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

}

然后在app.json中放置css路径以获取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;
}

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

2 个答案: