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 相关文章推荐
Javascript 面向对象 继承
May 13 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
vue 实现锚点功能操作
Aug 10 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 字符串操作入门教程
2006/12/06 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python进程间通信Queue实例解析
2018/01/25 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
Python如何将模块打包并发布
2020/08/30 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
班级聚会策划书
2014/01/16 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
家长高考寄语
2015/02/27 职场文书
护士医德考评自我评价
2015/03/03 职场文书
协议书格式模板
2016/03/24 职场文书
商业计划书格式、范文
2019/03/21 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫