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实现表格数据的动态添加与统计的代码
Jan 31 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
Underscore源码分析
Dec 30 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 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入门教程 精简版
2009/12/13 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
深入分析PHP设计模式
2020/06/15 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
vue实现简单图片上传
2020/06/30 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
如何基于jQuery实现五角星评分
2020/09/02 jQuery
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
一百多行python代码实现抢票助手
2018/09/25 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
应届生.NET方向面试题
2015/05/23 面试题
安全生产先进个人材料
2014/02/06 职场文书
领导干部考察材料
2014/02/08 职场文书
医院信息公开实施方案
2014/05/09 职场文书
2014年司法局工作总结
2014/12/11 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
分享几个实用的CSS代码块
2022/06/10 HTML / CSS