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 相关文章推荐
js 单引号 传递方法
Jun 22 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 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
在JavaScript中调用php程序
2009/03/09 PHP
php简单分页类实现方法
2015/02/26 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
python如何调用百度识图api
2020/09/29 Python
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
Python文件操作的面试题
2013/06/22 面试题
年会搞笑主持词
2014/03/27 职场文书
复试通知单模板
2015/04/24 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书