• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

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

    发布者: 娅水9213 | 发布时间: 2025-8-13 15:02| 查看数: 85| 评论数: 0|帖子模式

    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
    来源:互联网
    免责声明:如果侵犯了您的权益,请联系站长(1277306191@qq.com),我们会及时删除侵权内容,谢谢合作!

    最新评论

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表