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

发布于 2024-11-26 00:09:23 字数 142 浏览 2 评论 0原文

这个不起作用：

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

我确实是流动的，因此当调整窗口大小时，它必须改变其尺寸。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谁的新欢旧爱 2024-12-03 00:09:23

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

看看这个小提琴。

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.

回复收藏 0 原文

橘虞初梦 2024-12-03 00:09:23

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

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 部分中添加一些较长的内容，您会发现如果您调整浏览器窗口的大小，它们会自动更改其高度以让所有内容可见。

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 原文

~没有更多了~