ExtJs4.x grid组件加入tab标签后关闭再开出错
如题,代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="extjs4.2/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs4.2/ext-all.js"></script>
<script type="text/javascript" src="extjs4.2/ext-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var gridStroe=Ext.create('Ext.data.Store', {
storeId:'sampleStore',
fields:[
{ name: 'symbol', type: 'string'},
{ name: 'price', type: 'number' },
{ name: 'change', type: 'number' },
{ name: 'volume', type: 'number' },
{ name: 'myvalue', type: 'string' }
],
data:[
{ symbol: "mstf00", price: 25.76, change: 2.43, volume: 61606325, myvalue:'abc123' },
{ symbol: "mstf11", price: 25.76, change: 2.43, volume: 61606325, myvalue:'abc123' },
{ symbol: "mstf22", price: 25.76, change: 2.43, volume: 61606325, myvalue:'abc123' }
],
autoLoad: true
});
var dataTb=Ext.create('Ext.grid.Panel', {
title: '数据展示',
store: Ext.data.StoreManager.lookup('sampleStore'),
autoScroll:true,
closable:true,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
dblclicksToEdit: 1 //设置单击单元格编辑
})
],
columnLines: true,
columns: [
{ text: 'Symbol', dataIndex: 'symbol',width:400, editor:{allowBlank:true}}, //editor:可对象也可字符串:editor:true/false
{ text: 'Current Price', dataIndex: 'price', width:400, renderer: Ext.util.Format.usMoney, editor:{allowBlank:true}},
{ text: 'Change', dataIndex: 'change', width:400,xtype: 'numbercolumn', format:'0.000', editor:{allowBlank:true}},
{ text: 'Volume', dataIndex: 'volume',width:400, xtype: 'numbercolumn', format:'0,000', editor:{allowBlank:true}},
{ text: 'myvalue', dataIndex: 'myvalue', width:400,editor:{allowBlank:true}}
],
tbar: [{ xtype: 'button', text: '文件上传'}],
});
var mypanel=Ext.create('Ext.tab.Panel',{
id:'tabid',
region: 'center',
height: '100%',
width: '100%',
activeTab: 0,
items:[
{title:'首页',html:'<p style=margin:10px>hello,首页</p>'}
]
});
//PanelTree
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "文件操作", expanded: true, children: [
{
id: 'daor',
text: "数据展示",
leaf: true
}
]
}
]
}
});
var daorpanel;
var tree = Ext.create('Ext.tree.Panel', {
border: false,
autoScroll: true,
store: store,
rootVisible: false,
listeners: {
itemclick: function (view, record, item, index, e, eOpts) {
if (record.get('leaf')) { //叶子节点
var id = record.get('id');
if (Ext.getCmp(id)) mypanel.setActiveTab(id);
else {
if (id == 'daor') {
daorpanel = mypanel.add(
dataTb
);
} else {
mypanel.add({
title: record.get('text'),
html: 'tab内容--' + record.get('text'),
closable: true,
id: id
});
}
if(id=='daor') mypanel.setActiveTab(daorpanel);
else
mypanel.setActiveTab(id); /*激活新的选项卡*/
}
}
}
}
});
var vp = Ext.create('Ext.Viewport', {
layout: 'border',
items: [
{
xtype: 'panel',
region: 'north',
height: 60
},
{
xtype: 'panel',
region: 'west',
collapsible: true,
title:'功能菜单',
width: 200,
items:tree
},
{
id:'myid',
xtype:'panel',
region:'center',
layout:'fit',
items:mypanel
}
]
});
})
</script>
</body>
</html>