extjs tabpanel限制选项卡数量实现思路及代码

代码如下:

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

赞 (0)

相关推荐

  • js tab 选项卡

    一般需要事先写好css样式等function tab(sId) { var tabs = document.getElementsByTagName("H2"); var boxs = document.getElementsByTagName("h3"); if ( boxs[sId].style.display=="block"){ boxs[sId].style.display="none"; tabs[sId].sty

  • js 多层叠的TAB选项卡

    HTML:多个导航tag加一个放置默认内容div 脚本:以数组的形式给出每个导航对应的html 多层叠TAB选项卡 .nonstop { width:168px; font-size:12px;margin:auto; border:1px solid #cdcdcd; padding:2px; overflow:hidden; } .nonstop span { float:left;_display:inline; cursor:pointer; width:22px; height:14p

  • 纯php打造的tab选项卡效果代码(不用js)

    1.根据get判断,获取get生成css 复制代码 代码如下: <style type="text/css"> <?php if(!isset($_GET['city_id'])) { $city_id = 12; } else { $city_id = $_GET['city_id']; } echo '.a'.$city_id.' { color:red; } '; for($i=12;$i<=16;$i++) { if($i != $city_id) {

  • javascript实现tabs选项卡切换效果(自写原生js)

    javascript实现tabs选项卡切换效果(自写原生js)

    现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下:  html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</

  • 跨浏览器通用、可重用的选项卡tab切换js代码

    由于近来学了点js,于是我装逼道...不太难吧...就切一下display属性?同学无视我..说要搞个通用的...什么还要跟ajax交互..???我愣是没有听懂...到底要搞什么...权当作练手,我自己胡弄了一个. 需求:同学口中的通用我不知道神马意思...那我就按自己的理解吧.. ①跨浏览器,IE6+,FF,Chrome,Safari,Opera ②同一个页面可以用同一个js设置不同的选项卡. 说太多没啥米用,来看代码吧. 一.html部分(其实这还没啥好看的,设置了三个,前两个是一样的,通过

  • js简单实现竖向tab选项卡的方法

    本文实例讲述了js简单实现竖向tab选项卡的方法.分享给大家供大家参考.具体如下: 选项卡占据左边,而内容放在右边,一个适合新手的竖向的tab选项卡特效例子 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ru"> <head> <title>

  • js实现tab选项卡函数代码

    * { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-b

  • extjs tabpanel限制选项卡数量实现思路及代码

    复制代码 代码如下: var tabIndex = 'shouye'; var tabIndex2 = 'shouye'; var tabIndex3 = 'shouye'; var tabIndex4 = 'shouye'; var tabIndex5 = 'shouye'; var tabIndex6 = 'shouye'; var tabIndex7 = 'shouye'; /** * 向TabPanel组件中添加窗口或激活已经存在的窗口 * 并将指定资源加载进窗口 * @param no

  • vue中tab选项卡的实现思路

    vue中tab选项卡的实现思路

    今天分享下vue中tab选项卡的套路,废话不多说,直接上效果图 应用场景 •不同注册和登录方式切换 •操作选项切换 如保存和取消 •后台管理系统中各菜单选项切换等 •新闻标题分类切换 如关注 推荐 热点等分类 主要思路 •点击不同 tab 获取 tab 选项卡下标并为其动态绑定一个class(选中状态时的样式) •点击时使 tab 对应的内容下标与 tab 选项卡下标保持一致 •使用 v-show / v-if 指令控制内容显示与隐藏 代码如下 <html lang="en"&g

  • 妙用Ajax技术实现局部刷新商品数量和总价实例代码

    妙用Ajax技术实现局部刷新商品数量和总价实例代码

    1. 问题的分析 先看一下页面中的情况: 功能如上,在没有Ajax之前,一般都是根据用户修改的值去找Action,然后返回新的jsp页面重新加载整个页面,完成数字的更新.但是有了Ajax技术后,我们可以利用Ajax技术局部刷新要改变的地方,而不是重新加载整个页面.首先看一下上图对应的jsp部分的代码: <div class="section_container"> <!-- 购物车 --> <div id="shopping_cart"

  • 基于JS实现无缝滚动思路及代码分享

    原理: 1.给ul一个绝对定位使其脱离文档流,left设置为0,把图片塞进ul里,编写一个"移动"函数,函数功能能够使ul的left以一个正速度向右跑动, 2.设置一个定时器,让"移动"函数每30(参数可变)毫秒执行一次 3.因为ul的长度会"跑"完,此时可以使ul的content也就是img增加一倍, oUl.innerHTML +=oUl.innerHTML; 4.此时因为ul的content增加,其width也会随着增大,根据实际项目展示图

  • Javascript highcharts 饼图显示数量和百分比实例代码

    Javascript highcharts 饼图显示数量和百分比实例代码 最近公司项目需求有这样一个功能模块,highcharts 饼图显示数量和百分比 ,由于本人刚入门,看到这个需求不会写,于是就上网搜下相关资料,觉得一篇还不错记录下. <div class="piecleft" id="chart" style="height:350px; width: 350px;"> </div> <script type=

  • java 导入Excel思路及代码示例

    java 导入Excel思路及代码示例

    导出就是将List转化为Excel(listToExcel) 导入就是将Excel转化为List(excelToList) 一.思路分析 1.我们要做导入,实际上也就是先文件上传,然后读取文件的数据. 2.我们要有一个导入的模板,因为我们导入的Excel列要和我们的数据字段匹配上,所以我们要给它来一个规定,也就是模板. 3.按照我们公司的套路,是做了一个导入信息的临时表,用来存导入文件中的信息.每当导入的时候,我们先把表信息清空,再拿到数据放进来,然后我们对导入的数据进行检查,最后才全部导入.

  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    就在昨天,微信宣布了微信小程序开发者工具新增"云开发"功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜素功能的效果图 1.首页分类功能的实现 boxtwo方法(.js文件) boxtwo: function (e) { var index = parseInt(e.currentTarget.dataset.index) this.setData({ HomeIndex: index }) }, 当在首页点击 分类导航时,会触发这个方法,并传回当前点击

  • Java青蛙跳台阶问题的解决思路与代码

    Java青蛙跳台阶问题的解决思路与代码

    问题描述 一只青蛙一次可以跳上1级台阶,也可以一次跳上2级台阶,请问跳上n级台阶,该请娃一共有多少种跳法? 解决思路 ①如果只有1级台阶,那显然只有一种跳法. ②如果有2级台阶,那么就有2种跳法,一种是分2次跳.每次跳1级,另一种就是一次跳2级. ③如果台阶级数大于2,设为n的话,这时我们把n级台阶时的跳法看成n的函数,记为,第一次跳的时候有2种不同的选择:一是第一次跳一级,此时跳法的数目等于后面剩下的n-1级台阶的跳法数目,即为,二是第一次跳二级,此时跳法的数目等于后面剩下的n-2级台阶的跳法

  • JavaScript 监听组合按键思路及代码实现

    JavaScript 监听组合按键思路及代码实现

    JavaScript监听组合按键 1. 思路 如图,通过监听并打印键盘keydown事件,得到图示内容,观察发现, 当按下的组合键包含Ctrl键时,ctrlKey键会显示为true; 当按下的组合键包含Shift键.或者按键之前开启大写时,shiftkey键会显示为true; 当按下的组合键包含Alt键时,altKey键会显示为true; 当按下的组合键包含meta键(Mac电脑上 是 [⌘].command键,非mac电脑为 是win键时,metaKey键会显示为true 另外,按下键时,可通

  • uniapp小程序实现瀑布流布局的思路与代码

    uniapp小程序实现瀑布流布局的思路与代码

    一.前言 现在写瀑布流算不算是炒冷饭啊? 我不管, 我就要写,谁也别想拦我. 瀑布流应该算是很常见的一种布局方法了,大致的思路也很好理解, 但是在小程序里面确有另外需要考虑的几个问题. 问题1:uniapp是基于Vue的,所以不好直接操作DOM. 问题2:uniapp基于Vue,但也做了一些修改,所以不好拿ref来操作 二.先说思路 为了保证文章的长度,以及有些小伙伴对瀑布流的基本思路不是很了解,所以先讲讲瀑布流的思路,先看下图. 可以看到,商品的图片高度是不一致的,再加上商品标题的行数不一致,

随机推荐