ExtJS: Fix image over two toolbar elements

Question

What I'm trying to do looks like this:

So far, I've managed to create the two toolbars with the image inside of one of them:

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

});

Which looks like that:

But everytime I try to push down the image, changing the CSS's top or margin-top properties for example, it renders under the second toolbar. I've also tried with z-index, but no result.

¿Is there anyway to accomplish this?

score 0 · Answer 1 · answered Sep 25 '15 at 11:42

The solution was given to me in this Sencha Forum thread

You can create an image dom element and position it where you want.

    //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" />'));

Of course, you should put this in a afterrender listener on your Main panel.

See the fiddle.

ExtJS: Fix image over two toolbar elements

1 Answers1