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 当前日期转化为中文的实现代码
May 13 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
小程序实现抽奖动画
Apr 16 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
jQuery实现评论模块
Aug 19 jQuery
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
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
js实现列表按字母排序
2020/08/11 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python调用windows api锁定计算机示例
2014/04/17 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
如何用python写个模板引擎
2021/01/14 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
工作中的自我评价如何写好
2013/10/28 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
大学四年个人总结
2015/03/03 职场文书
检讨书格式
2015/05/07 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP