ExtJS - 在其他面板頂部添加浮動面板

我正在使用ExtJS 5.我需要在其他容器頂部顯示的容器，我不知道如何處理佈局以實現此目的。期望的效果是： ExtJS - 在其他面板頂部添加浮動面板

透明度僅用於問題目的。

使用純HTML則可能是：

<!DOCTYPE html> 
<html style="height: 100%"> 
    <head> 
     <title>a title</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    </head> 
    <body style="height: 100%; padding: 0; margin: 0"> 
     <div style="height: 100%; background-color: #bbb"> 
      <div style="height: 50px; background-color: #888; padding: 15px; font-size: 20px; position: absolute; width: 100%; box-sizing: border-box"> 
       Header 
      </div> 
      <div style="background-color: yellow; height: 100%; padding-top: 50px; box-sizing: border-box"> 
       <div style="width: 100%; height: 100%; padding: 10px; box-sizing: border-box; position: relative"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus feugiat nunc mauris, et vestibulum purus luctus a. Nulla semper semper augue vitae varius. Integer sit amet lobortis leo. Ut lobortis volutpat molestie. Sed malesuada scelerisque cursus. Praesent ac placerat tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ac augue elementum, aliquet purus suscipit, venenatis tellus. Sed varius arcu semper, tristique dui nec, scelerisque nibh. 
        <div style="position: absolute; opacity: 0.8; z-index: 999; top: 0px; left: 0; height: 100%; width: 200px; box-sizing: border-box; background-color: green; padding: 15px; color: white;"> 
         Panel on top 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

沒有綠色的容器也可能是簡單的VBox佈局。我不知道如何添加這個綠色面板做這樣的顯示。

編輯

我想：

Ext.define('MyApp.view.MainView', { 
    extend: 'Ext.container.Viewport', 
    alias: 'widget.mainview', 

    requires: [ 
     'MyApp.view.MainViewViewModel', 
     'Ext.panel.Panel' 
    ], 

    viewModel: { 
     type: 'mainview' 
    }, 
    itemId: 'mainView', 
    layout: 'border', 

    items: [ 
     { 
      xtype: 'panel', 
      region: 'north', 
      height: 100, 
      itemId: 'headerPanel', 
      layout: 'fit', 
      title: 'Header' 
     }, 
     { 
      xtype: 'panel', 
      region: 'center', 
      html: '<h3>Lorem</h3>', 
      itemId: 'contentPanel', 
      title: 'Content' 
     } 
    ] 

});

。

Ext.define('MyApp.view.SideContainer', { 
    extend: 'Ext.container.Container', 
    alias: 'widget.sidecontainer', 
    requires: [ 
     'MyApp.view.SideContainerViewModel' 
    ], 
    viewModel: { 
     type: 'sidecontainer' 
    }, 
    floating: true, 
    html: '<p>panel</p>', 
    itemId: 'sideContainer', 
    maxWidth: 150, 
    minWidth: 150, 
    width: 150 
});

我不知道接下來該做什麼。在控制檯中，我放了Ext.create('MyApp.view.SideContainer').toFront()並得到了錯誤me.zIndexManager is undefined。

來源

2016-01-21 koral

當你說你的意思是zIndex的「頂部面板」，對不對？不垂直對齊？ –

是的 - 我的意思是z-索引。 – koral

我認爲您需要在容器中創建一個浮動元件（請參閱https://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.Component-cfg-floating）。然後管理與setPosition兩種或alignTo定位（巫婆需要被管理AfterRender階段，因爲我們EL）或CSS

來源

2016-01-21 15:51:21 Psycho

我知道這一點，但我不能處理:(我把身體問題放在我的試用代碼中 – koral

我用你的代碼生成了一個快速[小提琴]（https://fiddle.sencha.com/#fiddle/14ls）它工作:)。我評論viewModel，因爲我沒有代碼（但你應該取消註釋）。爲了做到這一點，我建議創建一個面板並重寫''afterRender''方法，而不是使用''listeners''（但我這樣做是因爲它更快）。希望這是你想要的 – Psycho

小編輯我的小提琴中，我使用ExtJs 6，所以我把這兩個版本，你需要一點點的工作來解決定位（在ExtJs 6它工作就像一個魅力...）但我提出了明確的評論（您需要使用「alignTo」和「offset」） – Psycho

ExtJS - 在其他面板頂部添加浮動面板

回答

相關問題