html - 布局以填充除 Extjs 中的导航栏之外的所有浏览器窗口

Question

我正在使用 Extjs 并尝试创建一个布局来填充除导航栏之外的所有浏览器窗口。

我用 extjs/geoext 创建了一个 mapPanel，它在我的内容中呈现为一个 div:

Ext.create('Ext.panel.Panel', {
        layout: "fit",
        renderTo: "view",
        width:1100,
        height: 500,
        items: {
            layout: "border",
            deferredRender: false,
            items: [mapPanel, tree,
            ]
        }
    });

工作正常，但布局呈现在“ View ”div 内。 我可以简单地覆盖文档中除导航栏之外的所有内容吗？

Answer 1

您可以使用 renderTo: Ext.getBody() 或将所有内容包装在 Viewport 中.

Ext.create('Ext.container.Viewport',{
    items:[{
        layout: "border",
        deferredRender: false,
        items: [mapPanel, tree]
    }]
});

但是，这两种解决方案都不会覆盖正文中已经存在的所有内容 - 您必须手动销毁现有内容。

例如，如果您有启动画面:

<div id="splash" style="text-align:center; vertical-align:middle;">
    <br><br>
    <img src="Loading.png">
    <br><br>
    <progress max=100></progress>
    <br><br>
    Loading...
</div>

您可能想在 Application.js 的启动方法中销毁该屏幕:

launch: function() {
    var splash = Ext.get('splash');
    if(splash) splash.destroy();
}