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

我一直努力遵循，沒有運氣你的指令。由煎茶產生我視如下：

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

Main.js觀點：app.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); 
    } 
}); 

和部分：

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組件和Fit佈局，你的Panel作爲視口的子項目。

視口已對窗口大小作出反應，並且Panel將通過佈局「適合」到視口中。

Answer 2

您應該使用佈局爲'fit'的Ext.Viewport。例如：

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