我这左边有棵树,右边是个tabpanel.点击数的叶子节点,会在tabpanel上构造一个新的tab.如图:
1)这是左边的树和右边的tabpanel:
[img]/upload/attachment/129684/ce489efc-1620-37bb-8c81-16314c95a45c.jpg[/img]
2)当我点了第一个叶子节点之后,效果:
[img]/upload/attachment/129686/2ddc7b3f-0d00-3547-ad76-00bed36b9800.jpg[/img]
3)我又点了第二个叶子节点:
[img]/upload/attachment/129688/6acd4d65-2b86-3d34-bcd1-c26461743fdd.jpg[/img]
4)以上都很正常,但是当我切换到添加第一个标签的时候,怪事来了:
[img]/upload/attachment/129690/47200bd1-bb53-33f5-b181-df1f23e4e11f.jpg[/img]
在第四张图中,很明显能看见,"第一层第二个叶子节点图形"这个东东是多出来的,原本是属于第二个新增的tab的.
在我添加第一个tab--添加第二个tab--切换到第一个tab的时候,出现了...这是个灵异事件?? :cry:
我的部分代码和注释如下,各位大大们帮帮偶,实在找不出哪有问题鸟:
1)点了叶子节点,创建或激活新的tab.
[code="java"]
// 点击是叶子节点,且tab不存在
if(node.isLeaf() && !tab)
{
// 面板添加新tab
topicTabPanel.add({
id:id,
title: node.text,
closable:true,
items:demo.createGraphAndGridPanel(node)
}).show();
}
// 将该tab设置为活动的
topicTabPanel.setActiveTab(tab);
[/code]
2)在tabpanel上创建新的tab的函数,这是一个panel:
[code="java"]
/**
- 创建中央面板中的图形
- @param {} node 左部的树的叶子节点
- @return {} 包含了图形的Panel */ demo.createGraphAndGridPanel = function(node) { return new Ext.Panel({ id:node.id.replace("_package", "_panel"),// ID为叶子ID去掉packeage,加上panel //layout:'auto', autoHeight:true, split:true, collapsible: true, layoutConfig:{animate:true}, viewConfig: {forceFit: true}, items:[ // 主题表格 //demo.createGridPanel(node), // 主题图形 demo.createGraphPanel(node) ] }); } [/code]
3)创建GraphPanel.就是这个Panel,会幽灵似的出现!
[code="java"]
demo.createGraphPanel = function(node)
{
return new Ext.Panel({
frame: true,
id:'graphPanel',
autoWidth:true,
autoHeight:true,
title:node.text + "图形",
collapsible: true,
split:false
});
}
[/code]
PS: demo.XXX 就类似于 var XXX ,我在js文件的开头定义了Ext.namespace("demo");
