Javascript ExtJS：修复两个工具栏元素上的图像

我想做的是这样的：

到目前为止，我已成功创建了两个工具栏，其中一个工具栏中包含图像：

Ext.define('bla.bla.bla.Main', {
  extend: 'Ext.panel.Panel',
  xtype: 'app-main',
  header: false,
  id:'main',
  layout: 'border',
  dockedItems: [
    {
        xtype: 'toolbar',
        dock: 'top',
        items: [{
                xtype:'label',
                html: '<img src="/resources/img/myImage.png" width="60" height="60">',
            },{......}
        ]
    },
    {
        xtype: 'toolbar',
        dock: 'top',
        style: {backgroundColor: 'green'},
        items: [{
                text: 'Home'),
            },{....}
        ]
    }
],
items: [{ // Panel central
    xtype: 'centerPanel',
    id: 'center-panel',
    region: 'center',
    layout: 'fit'
},{ // Pie
    xtype: 'footer',
    id: 'footer',
    region: 'south'
}]

Ext.define（'bla.bla.bla.Main'{
扩展：“Ext.panel.panel”，
xtype:'应用程序主'，
标题：false，
id:'main'，
布局：“边框”，
摘要：[
{
xtype:'工具栏'，
码头：“顶部”，
项目：[{
xtype:“标签”，
html:“”，
},{......}
]
},
{
xtype:'工具栏'，
码头：“顶部”，
样式：{backgroundColor:'green'}，
项目：[{
文本：“主页”），
},{....}
]
}
],
项目：[{//中央面板
xtype:“中心面板”，
id:'中心面板'，
地区：'中心'，
布局：“适合”
}，{//Pie
xtype:'页脚'，
id:'页脚'，
地区：'南'
}]

}))

看起来是这样的：

但每次我尝试按下图像，例如更改CSS的顶部或边距顶部属性时，它都会在第二个工具栏下渲染。我也尝试过z索引，但没有结果

---

有什么办法可以做到这一点吗？

解决方案是在这篇文章中给我的

您可以创建一个图像dom元素并将其放置在您想要的位置

    //render image\
    var style = "position: absolute;top: 10px;left: 10px;z-index: 99999;",
    href = "https://www.sencha.com/forum/sencha-assets/css/images/logo.svg";

    Ext.getBody().appendChild(Ext.DomHelper.createDom('<img id="image" style="' + style + '" src="' + href + '" height="60px" />'));

//渲染图像\
var style=“位置：绝对；顶部：10px；左侧：10px；z索引：99999；”，
href=”https://www.sencha.com/forum/sencha-assets/css/images/logo.svg";
Ext.getBody（）.appendChild（Ext.DomHelper.createDom（“”））；

当然，您应该将其放入主面板上的afterrender侦听器中

看