Ext的viewport在IE7下出现界面内容消失的问题

最近的项目中出现个搞笑问题，以tabs的形式打开一个ViewPort形式的页面,此viewport布局为borderlayout,当在js中添加Ext.QuickTips.init();后，一打开页面，点击其中任何地方，此页面上的内容就会消失，感觉是计算页面宽度与高度出了问题，然而不用tabs的形式打开此页面在单独打开时没有任何问题，且此问题仅在IE7上出现。

 

Ext.QuickTips.init();  //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息
	Ext.form.Field.prototype.msgTarget = 'side';
    
	
	//遇见个奇怪的问题,当viewport布局为border,再有Ext.QuickTips.init(); 的情况下点击这个viewport的页面，此页面内容在IE7下会消失
	var viewport = new Ext.Viewport(
		{
			layout : 'border',
			items : [
				{
					region : 'center',
					html : 'center'
				}
			]
		}
	);

 

 点击前的效果：

 点击center内任何地方后的效果：

 解决办法有两种：

1.删除Ext.QuickTips.init(); //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息

	Ext.form.Field.prototype.msgTarget = 'side';

这样做会倒致form中的较验提示不能显示

2.为viewport指定fit布局，

将要显示的内容用panel包一层，此panel用border布局，其它东西全加到panel的items中

//这个panel的添加纯粹是为了避免viewport为border布局时在IE7下页面内容消失的问题
	var panel = new Ext.Panel({
		layout : 'border',
		items : [
			userListPanel,
			tabPanel
		]
	});
	
	//遇见个奇怪的问题,当viewport布局为border,再有Ext.QuickTips.init(); 的情况下点击这个viewport的页面，此页面内容在IE7下会消失
	var viewport = new Ext.Viewport(
		{
			layout : 'fit',
			items : [
				panel
			]
		}
	);