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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
javascript 浏览器检测代码精简版
Mar 04 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
vue数据初始化initState的实例详解
Apr 11 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
使用PDB简单调试Python程序简明指南
2015/04/25 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
详解Python IO编程
2020/07/24 Python
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
土地转让协议书范本
2014/04/15 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
写给老师的感谢信
2015/01/20 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python