问个ext的grid自动适应的问题

Question

我的布局是左边可以左右收缩的菜单，
右边是tag，
每个tag都有一个grid列表，
点击菜单打开一个tag，
里面的grid显示正常，
可以填满整个区域，
但是当把左边的菜单收缩之后，
右边的grid右边会出现一个空白区域，
不知道是怎么回事，
知道的麻烦讲下，
谢谢了。
这是tag的代码，
var mainTags = Ext.create('Ext.tab.Panel', {
region: 'center',
deferredRender: true,
activeTab: 0,
autoDestroy:true,
autoHeight:true, margins: '35 5 5 0',
items: [{
id: 'tag_main',
title: '系统主页',
autoLoad: {
url: 'main.php',
scripts: true
},
autoScroll: true
}]
}); function addTab(avgObj) {
mainTags.add({
id: avgObj.id,
title: avgObj.text,
iconCls: avgObj.iconCls,

autoLoad: {
url: avgObj.url,
scripts: true
},
autoScroll: true,
closable: true
}).show();
};
这是grid的代码
var grid = Ext.create('Ext.grid.Panel', {
store: store, 
border: false,
autoHeight:true,
autoWidth:true,
height: '100%',
width: '100%',
disableSelection: false,
loadMask: true,
renderTo: 'user_grid',
multiSelect: true,
viewConfig : {
                    forceFit : true,//当行大小变化时始终填充满
},
tbar: [addBtn, delBtn],
columns: [{
header: 'Id',
dataIndex: 'id'
},
{
header: 'Name',
dataIndex: 'name'
},
{
header: 'Email',
dataIndex: 'email',
flex: 1
},
{
header: 'Phone',
dataIndex: 'phone'
}],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true
})
});