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 下拉框联动实现代码
Apr 09 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
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配置ZendOpcache插件加速
2019/02/14 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
js实现双色球效果
2020/08/02 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
一套软件开发工程师笔试题
2015/05/18 面试题
幼儿运动会邀请函
2014/01/17 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
社区平安建设方案
2014/05/25 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书