Window 使用 Ext.getBody.getViewSize() 在 Ext.js 中检测宽度

Question

我正在根据浏览器 Window 调整 window 的大小。现在我使用 Ext.getBody.getViewSize 作为近似值。它适用于 FireFox 和 Chrome，但不适用于 IE。

Ext.define('MyProject.view.MyWindow', {
extend: 'Ext.window.Window',
alias: 'widget.myWindow',
id: 'myWindow',
width : '70%',
height: '80%',
layout : 'fit',
title: 'My Window',
bodyStyle: {
    maxHeight: '700px'
},
   listeners:{
    resize:function() {
        console.log('resize');
        var size = Ext.getBody().getViewSize();
        console.log('height = ' + size.height );
        console.log('width = ' + size.width );
        this.setHeight(.9 * size.height );
        this.setWidth(.8 * size.width );
        this.alignTo(this.container, 'c-c');
        console.log('new height = ' + size.height );
        console.log('new width = ' + size.width );
    },
    afterrender:function() {
        console.log('afterrender');
        console.log(Ext.getBody());
        var size = Ext.getBody().getViewSize();
        console.log('height = ' + size.height );
        console.log('width = ' + size.width );

        this.setHeight(.9 * size.height );
        this.setWidth(.8 * size.width );
        this.alignTo(this.container, 'c-c');
        console.log('new height = ' + size.height );
        console.log('new width = ' + size.width );

    }
},
initComponent: function() {
    this.callParent(arguments);
}
});

如果我调整 IE 浏览器 window 的大小，高度和宽度不会改变，但如果我调整 Chrome 或 Firefox window 的大小，高度和宽度就会改变。是否有另一种方法可以使用在 IE 中工作的 Ext.js 5 来获取浏览器 window 的大小？

Answer 1

您或许应该考虑改用 Ext.Viewport。然后你可以调用 getWidth 和 getHeight。

查看文档 http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.container.Viewport

Window 使用 Ext.getBody.getViewSize() 在 Ext.js 中检测宽度

Window width detection in Ext.js using Ext.getBody.getViewSize()

internet-explorer

extjs

extjs5