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


Posted in Javascript onApril 02, 2013
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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
js中判断控件是否存在
Aug 25 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 #Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 #Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 #Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 #Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 #Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 #Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 #Javascript
You might like
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
javascript 写类方式之九
2009/07/05 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
jQuery中hide()方法用法实例
2014/12/24 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
python单例设计模式实现解析
2020/01/07 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
python将音频进行变速的操作方法
2020/04/08 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
Python csv文件记录流程代码解析
2020/07/16 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
销售文员的岗位职责
2013/11/20 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
电影焦裕禄观后感
2015/06/09 职场文书