Extjs Tab控件网页相对布局问题


// View中的代码，定义一个Tab,有两个items
Ext.define('ExtFrame.view.CropMapTab.CropMapTab',
{
extend:'Ext.tab.Panel',
alias:'widget.CropMapTab',
initComponent:function()
{
Ext.applyIf(this,
{
title:"例题",
region:'center',
activeTab: 0,
items:[
{
id: 'Test1',
title: '实例1',
contentEl:'cropMapDiv',
},
{
id: 'Test2',
title: '实例2',
contentEl:'AgriculturalZoneMapDiv'
}]
}); 
this.callParent(arguments);
}
});
// Controller中控制Tab的代码
Ext.define('ExtFrame.controller.CropMapFrameCtrl', {
    extend: 'Ext.app.Controller',
    views:[
     'CropMapTab.CropMapTab',
     'CropMapTab.CropMapToc'
    ],
init: function() {
this.control(
{
'CropMapTab':
{
resize:resizeMap  // 相对布局调用resizeMap函数
}, 'CropMapTab panel[id=Test2]': // 我想显示items2时，相对布局调用resizeMap，但是相对布局没有成功
{
//resize:resizeMap
}
});
    }
});
// JS的代码
function resizeMap() // 相对布局
{
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 500);
}问题是：实例1（Tab1），相对布局是可以的，但是实例2（Tab2)相对布局就不可以了。想请教下，该如何改？