positioning of a container in 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.

I can't understand what you're asking, might want to rephrase your question. — Evan Trimboli, Feb 20 '13 at 08:22
@EvanTrimboli I have three containers in a `toolbar`, from that I am trying to give position absolute to the first container. So that, the first container comes out of the bounds of its parent container i.e `toolbar`. I am doing this because In my case the first container must have a height greater than the `toolbar` height. but here if I apply `position: absolute` to the first container and give a height greater than the height of the `toolbar` to it, the `toolbar` also increasing its height. — Mr_Green, Feb 20 '13 at 08:27
@EvanTrimboli please let me know if you still can't understand my explanation. — Mr_Green, Feb 20 '13 at 08:33
What exactly are you trying to achieve? Because a toolbar will layout its items; if you need an item to not be part of that layout, why have it as a child of the toolbar? — Izhaki, Feb 20 '13 at 10:25
@Izhaki you have a good point. The thing is that I didn't design the layouts. so, I can't change it. I will explain the problem clearly. I am trying to position a container which will have a profile pic, having the name of the user in different container. The 'name' holding container should always be beside the 'profile pic' container. The profile pic container should have a height greater than the `toolbar`. — Mr_Green, Feb 20 '13 at 10:35

score 0 · Answer 1 · answered Feb 21 '13 at 05:00

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.

positioning of a container in extjs

1 Answers1