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

Question

This one didn't work:

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

I has do be fluid, so that when the window is resized it has to change its diemensions.

Answer 1

This can only be achieved by monitoring window.resize event.

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);
    });
});

Notice that my example works properly if body has overflow: hidden . Otherwise unwanted scrollbars will be shown.

Check out this fiddle .

Answer 2

This can also be achieved by creating a Viewport, which is designed to do exactly what you're asking. Here's a quick example, and it shows that you don't need to specify any heights/widths:

Ext.onReady(function(){

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

});

You'll note that you don't even need to "show" it.

EDIT: Oh, I meant to also remark that if you add some longer content into those html sections, you'll see that if you resize your browser window, they will change their heights automatically to let all the content be seen.