Question

这个不起作用：

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

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

Answer 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。

Answer 2

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

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部分添加一些更长的内容，你会发现如果你调整浏览器窗口的大小，它们会自动改变它们的高度以便看到所有的内容。

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

2 个答案: