Ext切换tab页导致内嵌的重新加载数据

目前在项目中遇到一个问题,在panel中内嵌了一个,panel放置在tabPanel中,在每次切换tab页的时候,导致中data都重新加载数据demo.svg。(注:这个现象出现在chrome,fireFox中,在IE9中不会重新加载数据)。

在网上查找了相关资料,很多人提到在tabPanel下嵌入flash也出现了类似问题,导致视频重新加载,导致该问题的主要发生的事情有:切换tab页的时候,其实是将上一个tab的div设置为“display:none”,当再次切换回来时,将div又设置为“display:block”。于是可以定位到是设置display属性导致的。

网上有人提出了解决方法,如下:

1、设置内嵌了的panel的属性:hideMode:'visibility'。因为visibility和display是有区别的,visibility设置为hidden时,其在文档内的占位还是存在的,只是不显示而已。

2、设置tabPanel的监听事件“beforetabchange”:

 listeners:{
	beforetabchange:function(tabPanel, newCard, oldCard, opts){
         oldCard.setHeight(0);
	 oldCard.setWidth(0);
}

}


我按照上述方法使用了,但是还是有点问题,必须来回切换两次,才能保证新开的tab页显示正常。

经过长时间找问题,发现是由于设置的height=0其实并没有立即生效,所以要来回切换两次。

于是找到一种新的解决方法,设置listeners的tabchange事件:

tabchange:function(tabPanel,newCard,oldCard,eOpts){
   					
                    if(oldCard.hideMode == 'visibility'){
                    	oldCard.body.dom.parentNode.style.height = '0px';
                    }
                    if(newCard.hideMode == 'visibility'){
                    	newCard.body.dom.parentNode.style.height = '100%';
                    }
   				}


问题终于解决了,松了一口气,花了半天的时间,还是有点收获,不错,\(^o^)/~


你可能感兴趣的:(extjs4)