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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 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的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
第四章 php数学运算
2011/12/30 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
Javascript MD4
2006/12/20 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
JS常用知识点整理
2017/01/21 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
Python读取图片属性信息的实现方法
2016/09/11 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
出纳岗位职责模板
2013/11/27 职场文书
2014年预算员工作总结
2014/12/05 职场文书
企业愿景口号
2015/12/25 职场文书
解析MySQL binlog
2021/06/11 MySQL
Python面向对象编程之类的概念
2021/11/01 Python
Go归并排序算法的实现方法
2022/04/06 Golang
MongoDB支持的索引类型
2022/04/11 MongoDB
Python 视频画质增强
2022/04/28 Python