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获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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 设计模式之 工厂模式
2008/12/19 PHP
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php中explode与split的区别介绍
2012/10/03 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
python删除过期文件的方法
2015/05/29 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
募捐倡议书怎么写
2014/05/14 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
高三英语教学计划
2015/01/23 职场文书
体育部部长竞选稿
2015/11/21 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python