Javascript Extjs-重新调整浏览器大小的面板

以下是我如何创建主应用程序面板：

//for main panel scroll 
Ext.getBody().setStyle('overflow', 'auto');
Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',

    height: Ext.getBody().getViewSize().height,
    width:  Ext.getBody().getViewSize().width,
    id: 'Main',
    autoScroll: true,
    layout: {
        type: 'border'
    },

    initComponent: function () {

当前的问题是，如果我在已调整大小的窗口（较小）中打开应用程序，然后将其放大，面板将永远不会采用新的浏览器大小。如何使其扩展以填充新尺寸

更新

我一直在努力按照你的指示行事，但运气不好。我的视口由sencha生成，如下所示：

Ext.define('MyApp.view.Viewport', {
   extend: 'MyApp.view.Main',
    renderTo: Ext.getBody(),
       layout: 'fit',
});

Main.js视图：

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel', 
    autoScroll: true, 
    title: 'Main',

        initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
            {
                    xtype: 'panel',
                    region: 'center',
            split: true,
                    frame: false,
                    id: 'mapPanel',                             

                    }              
            ],          
        });
        me.callParent(arguments);
    }
});

和app.js的一部分：

Ext.application({
    views: [
            'Main'
    ],
    autoCreateViewport: true,
    name: 'MyApp',
    launch: function () {
        Ext.getCmp('mapPanel').add({
            requires: ['MyApp.Map'],
            items: [{
                  xtype: 'mymap',
              //      id: 'themap'
                }
            ]
        });
        Ext.getCmp('mapPanel').doLayout();

    }
});

Ext.define('MyApp.Map', {
    extend: 'GeoExt.panel.Map',
    alias: 'widget.mymap',
    border: false,
    initComponent: function () {
        var me = this;
        Ext.apply(me, {
            map: map,
            height: Ext.getBody().getViewSize().height
        });
        me.callParent(arguments);
    }
});

---

有人能帮我吗？

这样配置面板时，您正在修复面板尺寸。 您可以将视口组件与“拟合布局”一起使用，并将面板用作视口的子项

---

视口已对窗口大小作出反应，面板将通过布局“适合”视口。

您应使用布局为“适合”的外部视口。例如：

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel', 
    autoScroll: true, 
    title: 'Main',

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

Ext.onReady(function() {
    new Ext.Viewport({
        layout: 'fit',
        items: Ext.create('MyApp.view.Main')
    });
});