我怎么能使一个窗口在100%的高度和宽度与ExtJs

How can I make a window in 100% height and width with ExtJs?

本文关键字：高度 100% ExtJs 窗口 怎么能 一个      更新时间：2023-09-26

这个不行:

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

必须是流动的，这样当窗口调整大小时，它必须改变其尺寸。

这只能通过监视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，我的例子可以正常工作。否则将显示不需要的滚动条。

看这个小提琴

这也可以通过创建Viewport来实现，该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部分，你会发现，如果你调整浏览器窗口的大小，他们会自动改变他们的高度，让所有的内容都能看到

相关文章：