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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
jQuery选择器全面总结
Jan 06 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
js实现模糊匹配功能
Feb 15 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
微信小程序如何实现五星评价功能
Oct 15 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
你真的了解JavaScript吗?
2007/02/24 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
详解python中index()、find()方法
2019/08/29 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
公司中秋节活动方案
2014/02/12 职场文书
关于读书的演讲稿
2014/05/07 职场文书
求职信名称怎么写
2014/05/26 职场文书
市场营销计划书范文
2015/01/16 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
Nebula Graph解决风控业务实践
2022/03/31 MySQL