Question

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

我的目标是将容器从toolbar中取出，因为它的高度应该比保持其他容器不变的toolbar更高。

Answer 1

如果配置文件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]
});

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

这个解决方案并不是那么漂亮，但可能会有效。

在extjs中定位容器

1 个答案: