extjs tabpanel限制选项卡数量实现思路及代码

所属分类: 网络编程 / JavaScript 阅读数: 1061
收藏 0 赞 0 分享
复制代码 代码如下:

var tabIndex = 'shouye';
var tabIndex2 = 'shouye';
var tabIndex3 = 'shouye';
var tabIndex4 = 'shouye';
var tabIndex5 = 'shouye';
var tabIndex6 = 'shouye';
var tabIndex7 = 'shouye';
/**
* 向TabPanel组件中添加窗口或激活已经存在的窗口
* 并将指定资源加载进窗口
* @param node : 传入的Node节点
*/
var loadPanel = function(node) {
var id= node.id;//获取节点的id
tabIndex7 = id;
var href = node.attributes.href;//获取节点中的href属性
var text = node.text;
var mainPanel = Ext.getCmp('mainPanel');
//mainPanel.remove('mainPanel', true);
var qtip = node.attributes.qtip;
var tab = mainPanel.getComponent(String(id));//获取指定id的组件对象
if(tab) {
mainPanel.setActiveTab(tab);//检验当前Tab选项卡是否存在,如果存在只需要激活
return;
}
//如果选项卡不存在,则以下为创建选项卡代码
tab = mainPanel.add(new Ext.Panel ({
//创建新选项卡的配置
id : String(id),//设置ID,需强制转换为string类型
title : text,//设置选项卡标题
tabTip : text,
html : '<iframe width=100% id=main_desk name=main_desk height=100% frameborder=0 scrolling=auto src=' + href + ' />',
autoScroll: true,
enableTabScroll:true,
defaults: {autoScroll:true},
closable : true //是否可以关闭
}));
mainPanel.setActiveTab(tab);//创建选项卡后,将其激活
mainPanel.remove(tabIndex, true);
tabIndex = tabIndex2;
tabIndex2 = tabIndex3;
tabIndex3 = tabIndex4;
tabIndex4 = tabIndex5;
tabIndex5 = tabIndex6;
tabIndex6 = tabIndex7;
}

使用的是用变量存储 id 加载新的选卡时 交换 id ,从而限制了打开的选项卡数量,如果不是一定要这个效果,建议不要频繁的关闭和创建tabpanel
更多精彩内容其他人还在看

JavaScript this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多