转自:http://www.coding123.net/article/20130828/Ext4-check-tabpanel-exist-tab.aspx
ext4如何判断tabpanel中是否已经存在某个tab,如果存在就激活这个tab,否则重新打开tab。
原理:在tabpanel添加tab的时候增加tab的id配置,然后通过Ext.getCmp获取控件,如果不存在则添加此tab,否则调用tabpanel的setActiveTab方法激活此tab。
示例代码,点击左边菜单treepanel的叶子节点时,在右边的tabpanel中动态添加tab,在添加前判断是否已经打开过tab,打开则激活此tab,否则添加新tab项。
需要注意:treepanel的叶子节点id需要唯一,要不可能出错。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext4如何判断tabpanel是否已经存在某个tab</title>
<link type="text/css" rel="stylesheet" href="js/ext-4.2.1.883/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext-4.2.1.883/ext-all-debug.js"></script>
<script type="text/javascript">
var tab = new Ext.TabPanel({
region: 'center',
deferredRender: false,
activeTab: 0,
resizeTabs: true, // turn on tab resizing
minTabWidth: 115,
tabWidth: 135,
enableTabScroll: true
});
Ext.onReady(function () {
var viewport = new Ext.Viewport({
width: 1024,
height: 620,
layout: 'border', // border布局
items: [{
region: 'north', // 必须用region参数指定位置
xtype: 'panel',
height: 30,
frame: true,
split: false, // split属性是设置除了center区域外是否可调节大小
html: '欢迎登录!',
margins: '0 0 0 0'
// title: 'South Region is collapsible', //要想设置折叠必须设置title
// collapsible: true
}, {
region: 'south', // 必须用region参数指定位置
xtype: 'panel',
height: 30,
frame: true,
split: false, // split属性是设置除了center区域外是否可调节大小
html: '欢迎登录!',
margins: '0 0 0 0'
// title: 'South Region is collapsible', //要想设置折叠必须设置title
// collapsible: true
}, {
title: 'West Region is collapsible',
region: 'west',
xtype: 'panel',
width: 200,
collapsible: true, // 设置可折叠
id: 'west-region-container',
layout: 'fit',
margins: '0 0 0 0',
title: '管理系统',
items: [{
xtype: 'treepanel',
title: '系统菜单',
expanded: true,
listeners: { itemclick: function (view, record, item, index, e, eOpts) {
if (record.get('leaf')) { //叶子节点
var id = record.get('id');
if (Ext.getCmp(id)) tab.setActiveTab(id);
else{ tab.add({ title: record.get('text'), html: 'tab内容--' + record.get('text'), closable: true, id: id });tab.setActiveTab(id); /*激活新的选项卡*/}
}
}
},
containerScroll: true,
root: {
text: '系统管理',
children: [{
text: '行政区划管理',
id: 'c1',
expanded: true,
children: [{
text: '行政区划管理1',
id: 'c11',
leaf: true
}, {
text: '行政区划管理2',
id: 'c12',
leaf: true
}]
/*
* href:"Grid.html",//节点的链接地址
* hrefTarget:"tab"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
*/
}, {
text: '部门管理',
id: 'c2',
expanded: true,
children: [{
text: '部门管理1',
id: 'c21',
leaf: true
}, {
text: '部门管理2',
id: 'c22',
leaf: true
}]
}]
},
viewConfig: {
}
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: "全部折叠",
listeners: {
"click": {
fn: function () {
this.collapseAll();
},
scope: this
}
}
}]
}]
}, tab// 初始标签页
]
});
});
</script>
</head>
<body>
<div id='grid'></div>
</body>
</html>
转自:http://www.coding123.net/article/20130828/Ext4-check-tabpanel-exist-tab.aspx