positioning of a container in extjs - extjs

Question

In my project, I am trying to position a container as absolute. but if I do so, it is also effecting the neighbour items. I mean, after positioning the container, if I give some width and height to that particular container, it is effecting all the toolbar. (which I don't want to happen). This effect is happening even if I use layout: 'absolute or css position:absolute.
Here is my related code:
xtype: 'panel',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
height: 40,
items: [
{
//only this should be absolute positioned
xtype: 'container',
cls: 'logo', //tried with applying css styles !important
//even tried with layout: 'absolute'
},'-',
//the below elements should not move their position
//even if the above one has been applied positioning.
{
xtype: 'container'
},'->',
{
xtype: 'container'
}]
}],
Here my goal is to bring the container out of the toolbar because it should have greater height than the toolbar keeping other containers constant.

Answer 1

If the profile pic container has to be higher than the toolbar, it can't be a child of the toolbar container.
You could create a container with absolute layout below the toolbar, in that container you will have the profile pic and you can use a negative Y variable in order to move up the image, so it looks like is in the toolbar.
Just like this
var toolbar = Ext.create('Ext.toolbar.Toolbar', {
items: [
{},
{ xtype: 'tbspacer', width: 50 }, // Moving the button to the right
{ text: 'Fake Name Button' }
]
});
Ext.create('Ext.container.Container', {
layout: 'fit',
width : 700,
renderTo: Ext.getBody(),
items: [toolbar]
});
var image = Ext.create('Ext.Img', {
x: 0,
y: -25,
maxWidth: 70,
src: 'https://twimg0-a.akamaihd.net/profile_images/1471554494/swel.png'
});
Ext.create('Ext.container.Container', {
layout: {
type: 'absolute'
},
renderTo: Ext.getBody(),
items: [image]
});
http://jsfiddle.net/alexrom7/33cP8/1/
This solution is not so pretty, but it might work.