extjs tabpanel中关闭子tab出错

Question

使用的是Extjs web应用程序开发指南中中例子。用到的是tabpanel
在子tab使用中错误：如下图  在tab中
在tabpanel的tab(线形统计中) 新创建了一个panel
{    panel = new Ext.panel（
      title:"警报和告警统计图"
     item{
        xtype:'linechart',
        store:store,
     }
  ）  this.add(panel);
}点击“线形统计”的关闭 时出现错误
该tab不能关闭这是为何

Answer 1

Main.jsExt.onReady(function() { Ext.BLANK_IMAGE_URL = 'pic/s.gif';
Ext.chart.Chart.CHART_URL = 'extjs/resources/charts.swf';
Ext.QuickTips.init();
Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";
// 1、创建head部分
var head = new Ext.Panel( {
region : 'north',
border : false,
html : '<div style="background:url(pic/main1.gif) repeat-x; height:78px;">' + '<div style="float:right;font:normal 12px tahoma, arial, sans-serif, 宋体;margin:40px 0 0 10px;">'
+'&nbsp;&nbsp;'+ '<a href="loginout.php">退出</a>&nbsp;&nbsp;&nbsp;&nbsp;</div>' + '</div>',
height : 80
});

var user_name = "admin";

// 2、创建foot部分
var foot = new Ext.Panel( {
region : 'south',
html : '<div style="background:url(pic/main2.gif) repeat-x; height:33px; ">'
+ '<div style="float:left;font:normal 12px tahoma, arial, sans-serif, 宋体;margin:10px 0 0 10px;">'
+ "当前用户: <span style=\"color:blue\">" + user_name + "</span> &nbsp;</div>"
+ '<div style="float:right;margin:10px;font:normal 12px tahoma, arial, sans-serif, 宋体;" >'
+ '版权所有：<a href="http://www.www.com">www.www.com</a></div>'
+ '</div>',
height : 35
});
//数据统计
var t3 = new Ext.tree.TreePanel( {
border : false,
rootVisible : false,
root : new Ext.tree.AsyncTreeNode( {
text : "数据统计",
expanded : true,
children : [
{
id : "piechart",
text : "饼状统计",
leaf : true
}/*,{
id : "columnchart",
text : "柱状统计",
leaf : true
}*/, {
id : "linechart",
text : "线性统计",
leaf : true
}]
}) });


var leftmenu = new Morik.Office.LeftMenu( {
title : '管理系统',
  trees : [t3]
}); var mainTab = new Morik.Office.MainingPanel( {
style : 'padding:0 6px 0 0',
autoScroll : true,

region : 'center',
deferredRender : false,
activeTab : 0,
resizeTabs : true,
inTabWidth : 100,
tabWidth : 90,
enableTabScroll : true,
items : [{
title : '首页',
html : '<div style="background:url(pic/main_new.gif) no-repeat center middle; height:508px;"></div>'
}]
}); // 5、建立leftmenu和mainTab两者之间的关系
leftmenu.on("nodeClick", function(nodeAttr) {
mainTab.loadTab(nodeAttr);
});
// 6、创建布局
var viewport = new Ext.Viewport( {
layout : 'border',
style : 'border:#024459 2px solid;',
items : [head, foot, leftmenu, mainTab]
}); });

Answer 2

MainPanel.js
Ext.ns("Morik", "Morik.Office", "Morik.Util", "Morik.Office.Department");
Morik.Office.MainingPanel = Ext.extend(Ext.TabPanel, {
initComponent : function() {
// 一些初始化工作
Morik.Office.MainingPanel.superclass.initComponent.call(this);
this._cache = {}; },
loadTab : function(node) {
var n = this.getComponent(node.id);
if (n) {
this.setActiveTab(n);
} else {
var c = {
'id' : node.id,
'title' : node.text,
closable : true
};
var pn = this.findPanel(node.id);
n = this.add(pn ? new pn(c) : Ext.apply(c, {
html : '你还没有实现该页面！'
})) n.show().doLayout();
}
if (n.ds)
n.ds.load({params:{start:0, limit:25}});
},
findPanel : function(name) {
var ret = this._cache[name];
if (!ret) {
var pn = (this.ns ? this.ns : 'Morik.Office') + "."
+ Ext.util.Format.capitalize(name) + 'Panel';
var ret = eval(pn);
}
return ret;
},
addPanel : function(name, panel) {
if (!this._cache)
this._cache = {};
this._cache[name] = panel;
}
});

Answer 3

LinechartPanel.jsMorik.Office.LinechartPanel = function(config) {
Morik.Office.LinechartPanel.superclass.constructor.call(this, config);

var proxy = new Ext.data.HttpProxy( {
url : 'data.php',
method:'post'
});


 var store = new Ext.data.Store({    
  //proxy: new Ext.data.MemoryProxy(data),    
  proxy:proxy,
  reader: new Ext.data.JsonReader(
  {
  root : "data"
  }, [
  {name: 'name'},
  {name: 'visits',type:'int'},
  {name: 'views',type:'int'}    
  ])
 });
 
 store.load();  
 
  var m_height = document.body.scrollHeight - 140; 
 // extra extra simple    
var panel = new Ext.Panel({       
   title: '警报和警告数据统计图',        
   //floating:true,//可以拖拽
   //x:20,
   //y:20,      
   //width:1100,      
   height:m_height,      
   layout:'fit',
   viewConfig:{
autoFill:true
},  
   items:{          
      xtype: 'linechart',    
      store: store,            
      xField: 'name',        
      listeners: {              
         itemclick: function(o){   
           var rec = store.getAt(o.index); 
                   Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name')); 
            }            
       },
       series: [{
                          
        type: 'line',
       
        displayName: '警报信息',
        yField: 'views',
        style: {
        color:0x00BB00
        }   
       },{ 
        type:'line',
        displayName: '告警信息',
        yField: 'visits',
        style: { 
         color: 0xE1E100
        }
        }]                
   }    
 }); this.add(panel);



}
Ext.extend(Morik.Office.LinechartPanel, Ext.Panel, {});