ExtJS4.1 ExtJS TabPanel 双击标签关闭该页
关闭的时候不太顺手 感觉不方便 所以想双击关闭tab方便些
于是在网上找到下面的代码
URL:http://atian25.iteye.com/blog/413920
可是用在我的系统框架上无效,本人用的是ExtJs4.1。
不知道是不是我的问题,可是实在找不出错在哪里。
于是 自己想了个办法 亲测支持ExtJs4.1
可能有点麻烦 可是没办法 上面那个方法 我实在是找不出问题在哪里
*///////////////////---下面是网上找的方法 本人无效------////////////////////
- var tabs = new Ext.TabPanel({
- renderTo: 'tabs1',
- width:450,
- activeTab: 0,
- frame:true,
- defaults:{autoHeight: true},
- items:[
- {contentEl:'script', title: 'Short Text'},
- {contentEl:'markup', title: 'Long Text'}
- ],
- initEvents : function(){
- Ext.TabPanel.superclass.initEvents.call(this);
- this.on('add', this.onAdd, this, {target: this});
- this.on('remove', this.onRemove, this, {target: this});
- this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
- this.mon(this.strip, 'contextmenu', this.onStripContextMenu, this);
- if(this.enableTabScroll){
- this.mon(this.strip, 'mousewheel', this.onWheel, this);
- }
- //ADD:monitor title dbclick
- this.mon(this.strip,'dblclick',this.onTitleDbClick,this);
- },
- //ADD: handler
- onTitleDbClick:function(e,target,o){
- var t = this.findTargets(e);
- if (t.item.fireEvent('beforeclose', t.item) !== false) {
- t.item.fireEvent('close', t.item);
- this.remove(t.item);
- }
- }
- });
-----下面是我的方法--------
有用到 Viewport 只贴出了 tabpanel的代码
- {
- xtype: "tabpanel",
- region: "center",
- id: "tabpanel",
- minTabWidth: 100,
- listeners: {
- 'tabchange': function () {
- }
- }
- }
我是动态生成tab的 所以就写成这样了 注意里面的代码 双击关闭就是这里面
- var CreateTab=function(id,title,url){
- var tabs = Ext.getCmp("tabpanel");
- for (var i = 0; i < tabs.items.length; i++) {
- if (tabs.items.items[i].title == title) {
- tabs.items.items[i].show();
- return;
- }
- }
- var NewTabPanel= Ext.create('Ext.panel.Panel', {
- layout: 'fit',
- title: title,
- collapsible: true,
- closable: id==0?false:true,
- autoScroll: false,
- initEvents: function () {
- var obj = this;
- var id = 'tab-' + (this.id.split('-')[1] - 1 + 2) + '-btnWrap';
- Ext.get(id).dom.ondblclick = function () {
- if(obj.title!='我的工作台')
- tabs.remove(obj);
- }
- },
- html: '<iframe name="mainframe" width="100%" height="100%" frameborder="0" src="'+url+'"></iframe>'
- });
- tabs.add(NewTabPanel).show();
- }
- //用下面的代码可以测试添加Tab
- CreateTab("0", "我的工作台", "MyHome.htm");
- CreateTab("1", "账户管理", "User.htm");
ExtJS4.1 ExtJS TabPanel 双击标签关闭该页的更多相关文章
- 15.extjs tabPanel的用法
转自:https://blog.csdn.net/mezhaha/article/details/78878894 本文导读:TabPanel继承于Ext.Panel,Ext.TabPanel就是有选 ...
- Extjs TabPanel 选项卡延迟加载
Extjs TabPanel 选项卡延迟加载 说明: Ext中用到tabpanel选项卡控件, 选项卡页签默认是延迟加载的, 当用户手工切换到某页签下时该页签才会加载, 在页签没有加载前, 用户对该页 ...
- 16. Ext.ux.TabCloseMenu插件的使用(TabPanel右键关闭菜单) 示例
转自:https://crabdave.iteye.com/blog/327978 Ext.ux.TabCloseMenu插件的使用(TabPanel右键关闭菜单) 示例 效果: 创建调用的HTML: ...
- Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页
基于Bootstrap和JQuery实现动态打开和关闭tab页 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...
- thickbox关闭子页后ajax局部刷新父页
1. 首先注意需要调用thickbox的js <script type="text/javascript" src="<%=path%>/js/jque ...
- [DevExpress]XtraTabControl右键加入关闭当前页、关闭其它页、所有关闭的实现
private void xtraTabControl_MouseDown(object sender, MouseEventArgs e) { if (e.Button == MouseButton ...
- JS强制关闭浏览器页签并且不提示关闭信息
工作中很多奇葩的需求都会出现,现在就有一个问题,描述如下: 现在的登录跳转权限页面要去掉,集成在第三方系统信息上,当退出登录的时候需要关掉打开的Tab页面,因此考虑使用window.close()关闭 ...
- Extjs TabPanel页签转换事件
listeners : { tabchange : function(tp, p) { var allmapDIV = document.getElementById("allmap&quo ...
- ExtJS4中设置tabpanel的tab高度问题
最近碰到个问题,在ExtJS中应该如何设置tabpanel的tab的高度?因为默认情况下,tab的高度太矮了,以至于tab的标题底部字都被截掉.设置了个tabpanel.minHeight = ‘50 ...
随机推荐
- 在Linux(CentOS)中安装.netcore SDK
官方链接 :https://dotnet.microsoft.com/download/linux-package-manager/centos/sdk-current 可以直接根据官方链接,选择Li ...
- selenium grid应用1-多浏览器执行用例
driver =webdriver.Remote(command_executor=’http://127.0.0.1:4444/wd/hub’, desired_capabilities=Desir ...
- ftp,nfs和samba的区别
先从名字上进行理解: 1. FTP(文件传输协议) 2. NFS(网络文件系统) 3. samba 即smb(服务信息块)协议 1 其中FTP 是TCP/IP协议栈所提供的一种子协议,该子协议具体可以 ...
- 最直白、最易懂的话带你认识和学会---数据分析基础包之numpy的使用
前言 numpy是一个很基础很底层的模块,其重要性不言而喻,可以说对于新手来说是最基础的入门必须要学习的其中之一.在很多数据分析,深度学习,机器学习亦或是人工智能领域的模块中,很多的底层都会用到这个模 ...
- bootstrap使用前注意点和盒子模型
bootstrap注意事项: https://getbootstrap.com/docs/4.0/getting-started/introduction/#quick-start 盒子模型: htt ...
- python 函数操作
四.函数 定义: #!/usr/local/env python3 ''' Author:@南非波波 Blog:http://www.cnblogs.com/songqingbo/ E-mail:qi ...
- Python爬虫-正则表达式基础
import re #常规匹配 content = 'Hello 1234567 World_This is a Regex Demo' #result = re.match('^Hello\s\d\ ...
- 今日头条、Face++开发岗面经
今日头条.Face++开发岗面经 [头条] 两个栈实现一个队列.怎么优化 数组每一个元素找出数组右边第一个大于自己的数 实现LRU TCP四次握手 滑动窗口.窗口大小 线程与进程区别 什么是线程安全 ...
- 【Sql Server】Sql语句整理
use Person <--添加约束--> Alter table Student alter column Sno ) not null; Alter table Student Add ...
- thinkphp5.0目录结构
下载最新版框架后,解压缩到web目录下面,可以看到初始的目录结构如下: project 应用部署目录 ├─application 应用目录(可设置) │ ├─common 公共模块目录(可更改) │ ...