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 oop开发滑动(slide)菜单控件
Aug 25 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
php数组分页实现方法
2016/04/30 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
javascript 继承实现方法
2009/08/26 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
简单理解Python中的装饰器
2015/07/31 Python
python中kmeans聚类实现代码
2018/02/23 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
anaconda如何查看并管理python环境
2019/07/05 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
Python3读写ini配置文件的示例
2020/11/06 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
迎新晚会邀请函
2014/02/01 职场文书
环保倡议书50字
2014/05/15 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
交警失职检讨书
2015/01/26 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python