0

在我的项目中，我试图将容器定位为绝对容器。但如果我这样做，它也会影响邻居项目。我的意思是，在定位容器之后，如果我给那个特定的容器一些宽度和高度，它会影响所有的工具栏。（我不想发生）。即使我使用layout: 'absoluteor 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'
            }]
        }],

在这里，我的目标是将容器带出，toolbar因为它应该比toolbar保持其他容器保持不变的高度更大。

4

1 回答 1

0

如果配置文件图片容器必须高于工具栏，则它不能是工具栏容器的子级。

您可以在工具栏下方创建一个具有绝对布局的容器，在该容器中您将拥有个人资料图片，并且您可以使用负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]
});

http://jsfiddle.net/alexrom7/33cP8/1/

这个解决方案不是很漂亮，但它可能会奏效。

于 2013-02-21T05:00:24.983 回答