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 相关文章推荐
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
js实现加载更多功能实例
Oct 27 Javascript
JS实现购物车特效
Feb 02 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
通过实例了解js函数中参数的传递
Jun 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
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
PHP7内核之Reference详解
2019/03/14 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
国际贸易毕业生求职信范文
2014/02/21 职场文书
单位消防安全责任书
2014/07/23 职场文书
销售竞赛活动方案
2014/08/23 职场文书
假释思想汇报范文
2014/10/11 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python