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下过滤数组重复值的代码
Sep 10 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
jquery append与appendTo方法比较
May 24 jQuery
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 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
建立文件交换功能的脚本(一)
2006/10/09 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
PHP加密解密实例分析
2015/12/25 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
python集合用法实例分析
2015/05/30 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
电子商务专业实习生自我鉴定
2013/09/24 职场文书
门前三包责任书
2014/04/15 职场文书
计生工作先进事迹
2014/08/15 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
大学生实习证明范本
2014/09/19 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
文艺演出主持词
2015/07/01 职场文书
趣味运动会标语口号
2015/12/26 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
使用Python解决图表与画布的间距问题
2022/04/11 Python