在extjs中定位容器

在我的項目中，我試圖將容器定位爲絕對。但如果我這樣做，它也會影響鄰居的物品。我的意思是，在放置容器後，如果我給某個容器設置了一些寬度和高度，它會影響到所有的工具欄。（我不想發生）。即使使用layout: 'absolute或css position:absolute，也會發生此效果。在extjs中定位容器

這裏是我相關的代碼：

 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保持其他容器不變更高的高度。

來源

2013-02-20 Mr_Green

我不明白你在問什麼，可能想要重述你的問題。 – 2013-02-20 08:22:46

@EvanTrimboli我有一個'工具欄'三個容器，從那裏我試圖給位置絕對的第一個容器。這樣，第一個容器就從其父容器的邊界出來，即「工具欄」。我這樣做是因爲在我的情況下，第一個容器的高度必須大於'toolbar'高度。但是如果我在第一個容器上應用'position：absolute'並給出一個高於'toolbar'高度的高度，'toolbar'也會增加它的高度。 – 2013-02-20 08:27:36

@EvanTrimboli請讓我知道你是否仍然不明白我的解釋。 – 2013-02-20 08:33:17

如果配置文件圖片容器必須高於工具欄，它不能是工具欄容器的子項。

您可以創建一個容器工具欄下方絕對佈局，在該容器中，你將有檔案相片，你可以以向上移動圖像使用負Ÿ變量，所以看起來是在工具欄中。

就這樣

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-21 05:00:24 alexrom7

在extjs中定位容器

回答

相關問題