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

Question

以下是我创建主应用程序面板的方法：

//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 () {

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

UPDATE

我一直在努力按照你的指示，没有运气。 我的视口由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);
    }
});

谁能帮我这个？

Answer 1

当您以这种方式配置时，您正在修复面板尺寸。 您可以使用具有“适合”布局的“视口”组件，将“面板”用作视口的子项。

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

Answer 2

您应该使用具有布局的Ext.Viewport：'fit'。 例如：

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