Ext.TabPanel和contentEl组合使用时.关闭一个tab然后再次打开报错的问题~~

目前我有一个TabPanel.假设当前有两个Tab好了.tabA和tabB.

var tabA = new Ext.Panel({ contentEl:'divA' }); var tabB = new Ext.Panel({ contentEl:'divB' }); var tabPanel = new Ext.TabPabel({ deferredRender: false, activeTab: 0, enableTabScroll:true, defaults: {autoScroll:true}, viewConfig: {forceFit: true}, plugins: new Ext.ux.TabCloseMenu() });

我是通过触发别的点击的将tabA和tabB加入进来的,加入的时候没问题,是OK的.

Js代码

//  加入tab前,先判断它是否存在.如果已存在.则激活它但不创建;
//  如果tab不存在,则创建它,并使之处于激活状态
var tab = tabPanel .getComponent(currentTabId);
if(!tab)
{
   //  在中央面板上创建新主题
   tabPanel.add(tab);
}
tabPanel.setActiveTab(tab); 

这样,通过以上以上的代码,我的TabPanel上将会有两个tab: tabA和tabB. 
值得注意的是.tabA和tabB都有contentEl属性. 
分别指定了jsp上的<div id="divA"></div>和<div id="divB"></div> 

然后我点击其中某一个tab上的XX按钮将其关闭.OK.正常. 

接着我再通过点击事件创建刚关闭的tab.就出问题了. 
出的错是: 
Ext.fly(ce) is null 
http://{myproject:port}/ext/ext-all-debug.js 
Line 22107 

我十分确定是contentEl属性的原因. 
因为我将这属性注释掉,创建,删除,再创建tab,是没问题的. 

-----------------------------------我是分割线---------------------------------- 

以上是一个问题,很关键,很重要. 
因为我觉得下面这个问题和它有莫大的关系. 

呃...是酱紫的~ 

小弟我在用fusionchart做报表. 

还是上面说的tabPanel. 
当前有两个tab.每一个tab都有contentEl对应jsp上的div. 
这个div我是用来显示图形的... 
大致的代码如下: 

Js代码

var chart = new FusionCharts("MSColumn3DLineDY.swf", "ChartId", "100%", "100%"); Ext.Ajax.request({ url :'myAction!method.action', success :function(result,request){ chart.setDataXML(eval('('+result.responseText+')').chartXml); // 将fusioncharts渲染到jsp中的div中 chart.render("divA"); } }); var tabA = new Ext.Panel({ // 这个panel包含jsp上的一个的div contentEl:'divA' });

   
   
   
   

    
    
    
    
var chart = new FusionCharts("MSColumn3DLineDY.swf", "ChartId", "100%", "100%");

Ext.Ajax.request({
   url :'myAction!method.action',
   success :function(result,request){
      chart.setDataXML(eval('('+result.responseText+')').chartXml);	
      // 将fusioncharts渲染到jsp中的div中
      chart.render("divA");
   }
});

var tabA = new Ext.Panel({
    // 这个panel包含jsp上的一个的div
    contentEl:'divA'
});


   
   
   
   

   
   
   
   

    
    
    
    

    
    
    
    
OK.代码就是那样子..我们创建一个tab,OK.关闭它,OK. 
    
    
    
    

    
    
    
    再创建...问题来了,ff报错是: 
n is null 
http://{myproject:port}/fusioncharts/JSClass/FusionCharts.js 
Line 234 
    
    
    
    

    
    
    
    

    
    
    
    
我觉得啊..因为有第一个错,所有导致了第二个错同时发生. 
    
    
    
    
而第一个错为什么会发生呢,就是因为
    
    
    
    它contentEl了一个div. 
当这个tab被删除之后,相应的div也随之没了?? 这是我的猜想... 
    
    
    
    

    
    
    
    所以再次创建的时候,要contentEl那个div,但是已经没了,就出错. 
    
    
    
    

    
    
    
    
这是我的猜想,不知道对不对. 
   
   
   
   

当前我还没想到好的解决办法.请GG们给我点明示...

 

--------------------------------------------------------------高手们的解答--------------------------------------------

2009-08-26 yourgame (资深架构师)

你在success里面判断tab页存在与否,如果不存在则创建之激活之,否则激活则以,而后渲染到tab页的body即可,不需要contentEl属性,contentEl 就是 panel.body,你也可以这样阿

Js代码

tab页 = {
    html:'<div id="divA"></div>'
} 

你只要保证渲染报表的时候tab页是存在的,把渲染和创建tab页放到一个方法中去就可以了.

 

 

-----------------------------------------------------------------------------------------------------------------------------

你的猜想是正确的.
1.contentEl : String
Specify the id of an existing HTML node to use as the panel's body content (defaults to '').
Description :
This config option is used to take an existing HTML element and place it in the body of a new panel (it simply moves the specified DOM element into the body element of the Panel when the Panel is rendered to use as the content (it is not going to be the actual panel itself).

2.再来看看TabPanel的源码,
close操作会触发remove事件,然后调用onRemove方法,

Javascript代码

 

 onRemove : function(tp, item){
  //被销毁了...
  Ext.destroy(Ext.get(this.getTabEl(item))); 

你为啥要chart.render("divA"); 呢?
把这个chart封装成一个FlashComponent(ext3.0),然后放入Panel不就ok了?