/*总觉得 TabPanel 生成的那个关闭按钮太小
关闭的时候不太顺手 感觉不方便 所以想双击关闭tab方便些
于是在网上找到下面的代码 
URL:http://atian25.iteye.com/blog/413920
可是用在我的系统框架上无效,本人用的是ExtJs4.1。
不知道是不是我的问题,可是实在找不出错在哪里。
于是 自己想了个办法 亲测支持ExtJs4.1 
可能有点麻烦 可是没办法 上面那个方法 我实在是找不出问题在哪里
*///////////////////---下面是网上找的方法 本人无效------////////////////////

  1. var tabs = new Ext.TabPanel({
  2. renderTo: 'tabs1',
  3. width:450,
  4. activeTab: 0,
  5. frame:true,
  6. defaults:{autoHeight: true},
  7. items:[
  8. {contentEl:'script', title: 'Short Text'},
  9. {contentEl:'markup', title: 'Long Text'}
  10. ],
  11. initEvents : function(){
  12. Ext.TabPanel.superclass.initEvents.call(this);
  13. this.on('add', this.onAdd, this, {target: this});
  14. this.on('remove', this.onRemove, this, {target: this});
  15. this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
  16. this.mon(this.strip, 'contextmenu', this.onStripContextMenu, this);
  17. if(this.enableTabScroll){
  18. this.mon(this.strip, 'mousewheel', this.onWheel, this);
  19. }
  20. //ADD:monitor title dbclick
  21. this.mon(this.strip,'dblclick',this.onTitleDbClick,this);
  22. },
  23. //ADD: handler
  24. onTitleDbClick:function(e,target,o){
  25. var t = this.findTargets(e);
  26. if (t.item.fireEvent('beforeclose', t.item) !== false) {
  27. t.item.fireEvent('close', t.item);
  28. this.remove(t.item);
  29. }
  30. }
  31. });

-----下面是我的方法--------

有用到 Viewport 只贴出了 tabpanel的代码

  1. {
  2. xtype: "tabpanel",
  3. region: "center",
  4. id: "tabpanel",
  5. minTabWidth: 100,
  6. listeners: {
  7. 'tabchange': function () {
  8. }
  9. }
  10. }

我是动态生成tab的 所以就写成这样了 注意里面的代码 双击关闭就是这里面

  1. var CreateTab=function(id,title,url){
  2. var tabs = Ext.getCmp("tabpanel");
  3. for (var i = 0; i < tabs.items.length; i++) {
  4. if (tabs.items.items[i].title == title) {
  5. tabs.items.items[i].show();
  6. return;
  7. }
  8. }
  9. var NewTabPanel= Ext.create('Ext.panel.Panel', {
  10. layout: 'fit',
  11. title: title,
  12. collapsible: true,
  13. closable: id==0?false:true,
  14. autoScroll: false,
  15. initEvents: function () {
  16. var obj = this;
  17. var id = 'tab-' + (this.id.split('-')[1] - 1 + 2) + '-btnWrap';
  18. Ext.get(id).dom.ondblclick = function () {
  19. if(obj.title!='我的工作台')
  20. tabs.remove(obj);
  21. }
  22. },
  23. html: '<iframe name="mainframe" width="100%" height="100%" frameborder="0" src="'+url+'"></iframe>'
  24. });
  25. tabs.add(NewTabPanel).show();
  26. }
  1. //用下面的代码可以测试添加Tab
  2. CreateTab("0", "我的工作台", "MyHome.htm");
  3. CreateTab("1", "账户管理", "User.htm");

更多0

ExtJS4.1 ExtJS TabPanel 双击标签关闭该页的更多相关文章

  1. 15.extjs tabPanel的用法

    转自:https://blog.csdn.net/mezhaha/article/details/78878894 本文导读:TabPanel继承于Ext.Panel,Ext.TabPanel就是有选 ...

  2. Extjs TabPanel 选项卡延迟加载

    Extjs TabPanel 选项卡延迟加载 说明: Ext中用到tabpanel选项卡控件, 选项卡页签默认是延迟加载的, 当用户手工切换到某页签下时该页签才会加载, 在页签没有加载前, 用户对该页 ...

  3. 16. Ext.ux.TabCloseMenu插件的使用(TabPanel右键关闭菜单) 示例

    转自:https://crabdave.iteye.com/blog/327978 Ext.ux.TabCloseMenu插件的使用(TabPanel右键关闭菜单) 示例 效果: 创建调用的HTML: ...

  4. Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    基于Bootstrap和JQuery实现动态打开和关闭tab页   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...

  5. thickbox关闭子页后ajax局部刷新父页

    1. 首先注意需要调用thickbox的js <script type="text/javascript" src="<%=path%>/js/jque ...

  6. [DevExpress]XtraTabControl右键加入关闭当前页、关闭其它页、所有关闭的实现

    private void xtraTabControl_MouseDown(object sender, MouseEventArgs e) { if (e.Button == MouseButton ...

  7. JS强制关闭浏览器页签并且不提示关闭信息

    工作中很多奇葩的需求都会出现,现在就有一个问题,描述如下: 现在的登录跳转权限页面要去掉,集成在第三方系统信息上,当退出登录的时候需要关掉打开的Tab页面,因此考虑使用window.close()关闭 ...

  8. Extjs TabPanel页签转换事件

    listeners : { tabchange : function(tp, p) { var allmapDIV = document.getElementById("allmap&quo ...

  9. ExtJS4中设置tabpanel的tab高度问题

    最近碰到个问题,在ExtJS中应该如何设置tabpanel的tab的高度?因为默认情况下,tab的高度太矮了,以至于tab的标题底部字都被截掉.设置了个tabpanel.minHeight = ‘50 ...

随机推荐

  1. centos7-sar工具的安装过程及其简单应用

    一.sar工具安装 1.进入yum配置文件目录: cd /etc/yum.repos.d/ 2.vi CentOS-Base.repo命令创建文件CentOS-Base.repo 文件内容见网页:ht ...

  2. Floyd_Warshall(任意两点之间的最短路)

    /* O(V^3) 案例: 1 2 2 1 3 5 2 3 1 */ #include <cstdio>#include <iostream>using namespace s ...

  3. java并发编程实战笔记---(第四章)对象的组合

    4.1设计线程安全的类 包含三个基本要素: 1.找出构成对象状态的所有变量 2.找出约束状态变量的不变性条件 2.简历对象状态的并发访问管理策略 对象的状态: 域 基本类型所有域, 引用类型包括被引用 ...

  4. Jinja2 及 render_template 的深度用法

    是时候开始写个前端了,Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下 首先我们要在后端定义几个字符 ...

  5. java1.8环境配置+win10系统

    Java环境配置相关 Java jdk 1.8版本的环境配置和1.7版本 存在一些差异,当然不同的操作系统可能会对jdk配置有一定的变化.本文我主要说1.8版本的jdk在window10 系统上的配置 ...

  6. Eolinker——高级代码模式(JS语法)

    ### 定义遍历与赋值JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:```var a=1;<!--or-->var a;a=1 ``` ### 输出输出函数 ...

  7. 【DEV C++】 Error: ld returned 1 exit status

    一般出现“ld returned 1 exit status”错误都是由于函数名称拼写错误造成的,或者在一个工程中不同的函数使用了同一个函数名,暂时还未遇到其他情况.

  8. java EE :GenericServlet 抽象类、ServletConfig 接口

    ServletConfig 接口:当前 Servlet 在 web.xml 中相关配置信息 package javax.servlet; import java.util.Enumeration; p ...

  9. java 用maven 构建项目时@Override错误的解决办法

    把工程编译时使用JDK1.6以上版本可以解决. eclipse中 Preferences-->Java-->Compiler-->Configure Project Specific ...

  10. 双缓冲解决控制台应用程序输出“闪屏”(C/C++,Windows)

    使用 C 语言编写游戏的小伙伴们想必起初都要遇到这样的问题,在不断清屏输出数据的过程中,控制台中的输出内容会不断地闪屏.出现这个问题的原因是程序对数据处理花掉的时间影响到了数据显示,或许你可以使用局部 ...