如何使用 ExtJs 制作 100% 高度和宽度的窗口？

Posted 2023-02-26

【中文标题】如何使用 ExtJs 制作 100% 高度和宽度的窗口？

【英文标题】：How can I make a window in 100% height and width with ExtJs?

【发布时间】：2011-07-26 07:13:17

【问题描述】：

这个没用：

new Ext.Window(
    width:'100%',
    height: '100%'
).show();

我确实是流动的，所以当调整窗口大小时，它必须改变它的尺寸。

【参考方案1】：

这只能通过监控window.resize事件来实现。

Ext.onReady(function() 
    var win = new Ext.Window(
        draggable: false
    );

    win.show();

    win.setSize(Ext.getBody().getViewSize());
    win.setPagePosition(0, 0);
    Ext.fly(window).on('resize', function(e, w) 
        win.setSize(Ext.getBody().getViewSize());
        win.setPagePosition(0, 0);
    );
);

请注意，如果body 具有overflow: hidden，则我的示例可以正常工作。否则会显示不需要的滚动条。

看看这个fiddle。

【参考方案2】：

这也可以通过创建视口来实现，该视口旨在完全按照您的要求进行。这是一个简单的示例，它表明您不需要指定任何高度/宽度：

Ext.onReady(function()

    var thisView = new Ext.Viewport(
        layout:'anchor',
        items:[
               title: 'Section 1'
                ,html: 'some content'
            
            ,  title: 'Section 2'
                ,html: 'some more content'
            
        ]
    );

);

你会注意到你甚至不需要“展示”它。

编辑：哦，我还想说，如果你在这些 html 部分中添加一些较长的内容，你会看到，如果你调整浏览器窗口的大小，它们会自动改变它们的高度，让所有内容都可以看到。

【讨论】：

这如何回答这个问题？视口会类似于窗口吗？窗口是弹出的东西，视口只是将组件呈现到文档的主体。如果我错了，请纠正我！

窗口和视口可以同时使用