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

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 ，我的示例可以正常工作overflow: hidden 。 否則將顯示不需要的滾動條。

看看這個小提琴 。

Answer 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部分添加一些更長的內容，你會發現如果你調整瀏覽器窗口的大小，他們會自動改變他們的高度，讓所有內容都被看到。