ExtJs布局问题，窗口调整大小后刷新页面，再最大化，显示出问题，求帮助

怎么让页面的布局随着页面的大小自动改变？？？？？？
当我把调试工具打开后，刷新页面，显示没有任何问题，如图：同当我把调试工具关闭后，就不正常了，如图：
Ext.require(['Ext.tree.*', 'Ext.data.*', 'Ext.tip.*']);
Ext.onReady(function() {
Ext.QuickTips.init();
/**
 * 导航菜单数据源
 */
var treeStore = Ext.create('Ext.data.TreeStore', {
proxy : {
type : 'ajax',
actionMethods : 'post',
url : 'menu_initMenu.action'
},
fields : ['id', 'text', 'url', 'leaf'],
root : {
text : "系统菜单",
id : '0',
expanded : false  // 菜单是否为打开状态
},
// folderSort : true,
sorters : [{
property : 'text',
direction : 'ASC'
}]
}); /**
 * 内容区域视图
 */
var centerPanel = Ext.create('Ext.tab.Panel', {
id : 'sjxc-contentPanel',
region : 'center',
layout : 'fit',
margins : '2 5 5 0',
enableTabScroll : true,
activeItem : 0,
items : [{
id : 0,
title : '首页',
closable : false,
autoScroll : true,
html : '<div align="center"><h1>欢迎</h1></div>'
}]
}) /**
 * 视图头部
 */
var northPanel = Ext.create('Ext.panel.Panel', {
xtype : 'box',
region : 'north',
border : false,
html : '<h1>管理系统</h1>',
margins : '0 0 5 0',
layout : 'border',
heigth : 30
}); /**
 * 导航菜单视图
 */
var treePanel = Ext.create('Ext.tree.Panel', {
id : 'sjxc-tree',
store : treeStore,
rootVisible : false, // root节点不可见
viewConfig : {
plugins : {
ptype : 'treeviewdragdrop',
containerScroll : true
}
},
listeners : {
itemclick : {
fn : function(view, record) {
if (record.data.leaf) {
var tabId = 'sjxc_' + record.data.id;
var tab = Ext.getCmp(tabId); // 获得当前要添加tab的ID
if (!tab) {
centerPanel.add({
id : tabId,
title : record.data.text,
closable : true,
layout : 'fit',
autoLoad : {
url : record.data.url,
loadMask : 'loading...',
autoLoad : true,
scripts : true
// 加载的页面中js可运行
}
// iconCls : 'tabs'
}).show();
} else {
tab.show();
}
}
},
scope : this
}
},
renderTo : Ext.getBody()
}); /**
 * 菜单导航视图
 */
var menuPanel = Ext.create('Ext.panel.Panel', {
region : 'west',
// layout : 'border',
plain : true,
collapsible : true,
split : true,
title : '菜单管理',
width : 250,
minSize : 100,
maxSize : 400,
items : [treePanel]
}); /**
 * 底部视图
 */
var southPanel = Ext.create('Ext.Toolbar', {
region : 'south',
height : 20,
collapsible : false,
layout : 'fit',
html : ['当前用户：', '->', '']
}) /**
 * 视图装载
 */
Ext.create('Ext.container.Viewport', {
frame : true,
layout : 'border',
title : '视图',
border : true,
items : [northPanel, menuPanel, centerPanel, southPanel],
renderTo : 'loginFrom'
});
});extjs布局