ExtJS：在两个工具栏元素上修复图像答案

【问题标题】：ExtJS: Fix image over two toolbar elementsExtJS：在两个工具栏元素上修复图像
【发布时间】：2015-09-24 10:25:10
【问题描述】：

我正在尝试做的事情是这样的：

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

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

});

看起来像这样：

但每次我尝试下推图像，例如更改 CSS 的 top 或 margin-top 属性时，它都会呈现在第二个工具栏下。我也试过 z-index，但没有结果。

¿有没有办法做到这一点？

【问题讨论】：

标签： javascript css extjs toolbar extjs6

【解决方案1】：

这个Sencha Forum thread给了我解决方案

您可以创建一个图像 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" />'));

当然，您应该将它放在主面板上的 afterrender listener 中。

请参阅fiddle。

【讨论】：