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 - 在其他面板顶部添加浮动面板

回答

相关问题