开发者

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

开发者 https://www.devze.com 2023-03-23 11:06 出处:网络
This one didn\'t work: new Ext.Window(开发者_Go百科{ width:\'100%\', height: \'100%\' }).show(); I has do be fluid, so that when the window is resized it has to change its diemensions.This can only

This one didn't work:

new Ext.Window(开发者_Go百科{
    width:'100%',
    height: '100%'
}).show();

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


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.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号