Question

我正在使用ExtJS 5.我需要一个显示在其他容器顶部的容器，我不知道如何处理布局来实现这一点。期望的效果是：

透明度仅用于解决问题。

使用纯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。

Answer 1

我认为您需要在容器中创建一个浮动（请参阅https://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.Component-cfg-floating）组件。然后使用 setPosition 或 alignTo 管理定位（需要管理afterRender，因为它是我们的）或CSS

ExtJS - 在其他面板的顶部添加浮动面板

1 个答案: