我正在使用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
。
當你說你的意思是zIndex的「頂部面板」,對不對?不垂直對齊? –
是的 - 我的意思是z-索引。 – koral