extjs中容器的定位

在我的项目中，我试图将容器定位为绝对容器。但如果我这样做，也会影响到邻近的项目。我的意思是，在定位容器之后，如果我给特定的容器一些宽度和高度，它会影响所有的工具栏。（我不想发生这种事）。即使我使用

layout:'absolute

或css

position:absolute

，这种效果也会发生

这是我的相关代码：

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

---

在这里，我的目标是将容器从

工具栏中带出来，因为它应该比
工具栏的高度更高，保持其他容器不变。
如果profile pic容器必须高于工具栏，它不能是工具栏容器的子容器

您可以在工具栏下方创建一个具有absolute布局的容器，在该容器中，您将拥有配置文件pic，您可以使用负Y变量向上移动图像，使其看起来像是在工具栏中

就这样

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]
});


这个解决方案不太漂亮，但可能会奏效。
我不明白你在问什么，可能想重新表述你的问题。@Evantimboli我在
工具栏中有三个容器，因此我试图给第一个容器以绝对位置。因此，第一个容器超出其父容器的边界，即
工具栏
。我这样做是因为在我的例子中，第一个容器的高度必须大于
工具栏的高度。但在这里，如果我对第一个容器应用
position:absolute
，并给它一个大于
工具栏高度的高度，
工具栏也会增加它的高度。@Evantimboli如果你仍然不明白我的解释，请告诉我。你到底想达到什么目的？因为工具栏将布局其项目；如果您需要某个项目不属于该布局，为什么要将其作为工具栏的子项？@Izhaki您有一个很好的观点。问题是我没有设计布局。所以，我不能改变它。我会把问题解释清楚的。我试图定位一个容器，其中将有一个配置文件图片，有在不同的容器中的用户名称。“名称”容器应始终位于“配置文件pic”容器旁边。配置文件pic容器的高度应大于
工具栏
。