`
kong0itey
  • 浏览: 305859 次
社区版块
存档分类
最新评论

extjs 添加选项卡

阅读更多
//添加标签(标签头信息,标签显示地址)
function addtab(tabarea,text,url,pos){
 var tab;
  try{
   if(tabcount==0){
    var tabs = new Ext.TabPanel(tabarea, {//向tabarea区域添加标签
    tabPosition : pos,//标签头位置  top  or  bottom
    resizeTabs:true, //标签头自动调整大小
    monitorResize:true,
    minTabWidth: 20,//标签头最小为50
    preferredTabWidth:120//标签头最大为150
    });
    tabcomm=tabs;//把标签对象副给标签全局对象
   }
   tabh=Ext.get(tabarea).getHeight();//得到区域的高 
   tabcount++;
   
    var tabFrame =  Ext.DomHelper.append(document.body, //创建一个iframe 
        {tag:'iframe',
      id:text,    //动态ID
      frameBorder:0,   //样式
      scrolling:'auto',   //滚动 
      src: url,    //抵制
      name:text, 
      width:'100%',
      height:"100%"
      });   
    
    tab = tabcomm.addTab(text,text,"",true); //向标签对象中添加新标签(对象名称,头信息,显示内容,可否关闭)
    tabgetcount=tabcomm.getCount();
    tab.activate();//设置当前窗体选中
    tabtext=text;
    tab.on('activate',function(){///得到当前标签头信息
     tabtext=tabcomm.getActiveTab().getText();

<!--此处是单独处理,针对一次打开多个标签进行验证,并找其对应数组
     if(document.getElementById(tabtext).src=="about:blank"){
       for(var i=0;i<tabshortcut.length;i++){
        if(tabshortcut[i][0]==tabtext){
         document.getElementById(tabtext).src=tabshortcut[i][1];
        }
       }
     }

-->
     tabActivate(tabtext);
    });
    tab.setTooltip(text);//设置提示信息
    tab.on('beforeclose',function(){//关闭标签事件
     tabtext=tabcomm.getActiveTab().getText();//得到当前标签头信息
     delArray(tabtext);
     Ext.get(tabtext).remove();
     tabgetcount--;
    });
    
   
  }catch(exception){}
}






  /** 
* 在新tabpanel打开页面 
*/  
function addTab(id,name,url,code){  
var tab = Ext.getCmp('mainContent').getItem(id);  
if (!tab) {  
    Ext.getCmp('mainContent').add({  
        id : id,  
        title : "<span style='float:left;height:21px;'>name+"</span>",  
        closable : true,  
        html : "<iframe id='iframe_" + id + "' scrolling='auto' border='0' frameborder='0' marginwidth='0'  marginheight='0' width='100%' height='100%' onload='unPageMask()'></iframe>"  
    }).show();  
    //由于IE6是无法解析创建iframe前指定的src属性,所以这里在创建iframe之后再指定路径;如果直接在iframe中指定src,在ie6下会出现空白页面  
    //document.getElementById("iframe_" + id).src= url;  
    window.frames["iframe_" + id].location.href =url;   
} else {  
    // 如果tab已存在,则刷新并切换至  
    window.frames["iframe_" + id].location.reload();  
    tab.show();  
}  
pageMask(); 







分享到:
评论

相关推荐

    Extjs4 tab 基本选项卡及增删插入操作

    在这个“Extjs4 tab 基本选项卡及增删插入操作”的主题中,我们将深入探讨如何使用ExtJS 4来管理TabPanel的选项卡,包括创建、删除和插入操作。 首先,让我们了解TabPanel的基本配置和选项: 1. **创建TabPanel** ...

    Extjs6.x插件,双击关闭选项卡(js源码)

    在EXTJS 6.x 中,`Ext.Tab.Panel` 是一个常用的组件,用于创建带有选项卡的布局,每个选项卡代表一个独立的视图或窗口。 在EXTJS 4.x 中,存在一种常见的用户交互模式,即双击选项卡来关闭该选项卡。然而,随着...

    jQuery模仿ExtJS之TabPanel最新

    动态向选项卡组件中添加一个选项卡元素。 flush(string | number) 刷新选项卡元素的内容 将选项卡元素的内容刷新,参数可以为选项卡元素的ID或下标。 show(string | number) 显示选项卡元素 显示制定选项卡元素,...

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

    在EXTJS中,`tabpanel` 是一个非常常用的组件,它用于展示多个页面或者视图,每个页面或视图被封装在一个选项卡中。在某些情况下,我们可能需要限制`tabpanel`中同时显示的选项卡数量,以保持界面的简洁性和易用性。...

    利用eval()函数给树节点统一添加单击事件实现新建选项卡功能

    这篇博客“利用eval()函数给树节点统一添加单击事件实现新建选项卡功能”探讨了一个具体的JavaScript编程技巧,如何通过eval()函数来处理用户交互,特别是针对树形结构数据的点击事件,进而实现新的选项卡功能。...

    extjs简单例子

    这个教程可能涵盖了如何创建和配置TabPanel,包括添加选项卡、设置选项卡样式、处理选项卡切换事件等内容。 4. **《TutorialWhat is that Scope all about (Chinese)》** “Scope”在JavaScript中是一个关键概念,...

    tab选项卡制作

    为了让Tab选项卡具有交互性,我们需要添加JavaScript代码。这段代码的作用是当用户点击某个标题时,会切换相应的列表显示状态。 ```javascript window.onload = function() { var menu = document.getElementById...

    【京华志】三款很给力的炫酷选项卡

    例如,使用jQuery的fadeIn()和fadeOut()方法,可以为选项卡切换添加平滑过渡效果,增强视觉吸引力。 至于Android,虽然不是Web开发技术,但考虑到标签中有提及,我们可以推测这可能是讨论如何在Android应用中实现...

    Extjs 通用后台模板| 经典 Tree+Tab+Grid

    这个"Extjs 通用后台模板| 经典 Tree+Tab+Grid"是一个基于ExtJS的预配置模板,它集成了常见的界面元素,如树形视图(Tree)、选项卡(Tab)和网格(Grid),为开发高效能、用户友好的后台应用提供了便利。...

    ExtJs 后台通用界面布局,左侧树,Center Tab 选项

    本主题主要关注的是ExtJs 中的一个常见布局模式:左侧树形导航与中心Tab选项卡结合的后台通用界面布局。 首先,我们要理解ExtJs中的“布局”(Layouts)。布局是ExtJs组件管理其子组件的方式,决定了子组件如何在...

    Extjs3.0 常用组件介绍及怎么安装开发利器Spket

    5. **TabbedPane(选项卡面板)**: TabbedPane允许在一个区域内展示多个面板,每个面板对应一个选项卡,用户可以通过点击不同的选项卡切换内容。 6. **Window(窗口)**: Window组件可以用来弹出浮动的对话框,支持...

    extjs6.5快速开始.pdf

    - **Tabs类**: 查看`Ext.tab.Tab`类的所有可用配置,了解如何进一步自定义选项卡。 ### 总结 通过以上内容的学习,我们不仅了解了如何使用Ext JS创建基本的UI组件,还掌握了如何构建更复杂的用户界面,如选项卡式...

    ExtJS-MVC-用户列表实例

    在压缩包中的"ExtTreeTab"可能表示一个包含树形结构和选项卡功能的组件。在用户列表实例中,它可能被用来展示用户组或者层级关系的用户。树形结构用于显示层次关系,而选项卡则可以用来分类或分组用户。 总结起来,...

    Extjs4.2 根据不同的数值设置tabpanel行的背景颜色

    **TabPanel** 是ExtJS中的一个常用组件,可以用来组织多个面板或视图,每个面板可以通过选项卡的形式进行切换展示。在本例中,我们将重点介绍如何在TabPanel中的GridPanel(表格面板)中根据不同条件动态改变行的...

    extjs树形结构实现系统主界面功能框架借鉴.pdf

    这个框架利用EXTJS的强大组件模型,允许用户通过点击树形节点在中心区域打开新的选项卡,展示相应的功能或内容。 1. **树形结构**:EXTJS的TreePanel组件用于构建树形结构。在这个例子中,树形结构的每个叶子节点...

    用spket在Eclipse中对extjs进行代码提示配置

    - 打开项目的属性设置,找到“JavaScript Build Path”,点击“Libraries”选项卡。 - 选择“Add External JARs”,浏览并选中之前下载的ExtJS库文件,例如`ext-all-debug.js`或`ext-all.js`,点击“OK”确认添加。 ...

Global site tag (gtag.js) - Google Analytics