ExtJS: Фикс изображение более двух элементов панели инструментов

Question

Что я пытаюсь сделать выглядит следующим образом:

До сих пор мне удалось создать две панели инструментов с изображением внутри одного из них:

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 в верхней или Верхнее поле свойства, например, это делает под второй панели инструментов. Я также пробовал с z-index, но никакого результата.

¿В любом случае, для этого?

Answer 1

Решение было дано мне в этом Sencha Forum thread

Вы можете создать элемент изображения Dóm и положение, где вы хотите.

//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 слушателя на вашей главной панели.

См. fiddle.