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

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

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

网上有人提出了解决方法，如下：

1、设置内嵌了<object>的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^)/~