Ext 选项卡面板TabPanel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十章：Ext 选项卡面板</title>
<link rel="stylesheet" href="src/ext/resources/css/ext-all.css"> <!--ext-base 必须在ext-all之前引入-->
<script src="src/ext/ext-base.js"></script>
<script src="src/ext/ext-all.js"></script>
<!--<script src="src/ext/ext-lang-zh_CN.js"></script>-->
</head>
<body> <div id="e"> </div>
<script src="src/js/TabCloseMenu.js"></script>
<script>
Ext.onReady(function () {
var panel1 = new Ext.Panel({
title: '选项卡1',
html: '中华人民共和国',
bodyStyle: 'padding:10px;',
}); var panel2 = new Ext.Panel({
title: '选项卡2',
html: '美利坚合众国',
bodyStyle: 'padding:10px;',
}); var tabPanel = new Ext.TabPanel({
renderTo: 'e',
width: 500,
height: 300,
});
tabPanel.add(panel1);
tabPanel.add(panel2);
tabPanel.setActiveTab(panel1); // 另外一种写法
var tabPanel2 = new Ext.TabPanel({
renderTo: Ext.getBody(),
width: 500,
height: 400,
items: [{
title: '选项卡3',
html: '中华人民共和国',
bodyStyle: 'padding:10px;',
closable : true, // 开启关闭
}, {
title: '选项卡4',
html: '美利坚合众国',
bodyStyle: 'padding:10px;',
closable : true,
}],
activeItem: 0, enableTabScroll: true,
border: false,
frame: true,
// layoutOnTabChange表示为每当Tab切换时就绘制一次布局。
layoutOnTabChange: true,
// plugins引入插件TabCloseMenu.js
plugins: [new Ext.ux.TabCloseMenu()],
defaults: {
// 如果内容超出范围，则自动出现滚动条
autoScroll: true,
// 一次性将选项卡内容全部加载，不推荐
deferredRender: false
}
}); }); </script> </body>
</html>
另外插件 TabCloseMenu.js 代码
Ext.ux.TabCloseMenu = function () {
var tabs, menu, ctxItem;
this.init = function (tp) {
tabs = tp;
tabs.on('contextmenu', onContextMenu);
};
function onContextMenu(ts, item, e) {
// 在第一个右击创建上下文菜单
if (!menu) {
menu = new Ext.menu.Menu({
items : [{
id: tabs.id + '-close',
text: '关闭标签',
handler: function () {
if(ctxItem.closable){
tabs.remove(ctxItem);
}
},
}, {
id: tabs.id + '-close-others',
text: '关闭其他标签',
handler: function () {
tabs.items.each(function (item) {
if (item.closable && item != ctxItem) {
tabs.remove(item);
}
});
},
}, {
id: tabs.id + '-close-all',
text: '关闭全部标签',
handler: function () {
tabs.items.each(function (item) {
if (item.closable) {
tabs.remove(item);
}
});
},
}, '-', {
id: tabs.id + '-fresh',
text: '刷新',
iconCls: 'x-tbar-loading',
handler: function () {
ctxItem.getUpdater().update(ctxItem.autoLoad.url);
},
}, {
id: tabs.id + '-fresh-all',
text: '刷新全部',
iconCls: 'x-tbar-loading',
handler: function () {
tabs.items.each(function (item) {
item.getUpdater().update(item.autoLoad.url);
});
},
}]
});
}
ctxItem = item;
var items = menu.items;
// 设置禁止关闭标签
items.get(tabs.id+'-close').setDisabled(!item.closable)
// 设置禁止关闭其他标签
var disableOthers = true;
tabs.items.each(function () {
if (this != item && this.closable) {
disableOthers = false;
return false;
}
});
items.get(tabs.id + '-close-others').setDisabled(disableOthers);
// 设置禁止关闭全部标签
var disableAll = true;
tabs.items.each(function () {
if (this.closable) {
disableAll = false;
return false;
}
});
items.get(tabs.id + '-close-all').setDisabled(disableAll);
menu.showAt(e.getPoint());
}
};
效果图
Ext 选项卡面板TabPanel的更多相关文章
- jQuery EasyUI 选项卡面板tabs使用实例精讲
1. 对选项卡面板区域 div 设置 class=”easyui-tabs” 2. 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title) 3. 设置面板 fi ...
- 高级组件——选项卡面板JTabbedPane
选项卡面板:JTabbedPane(标签位置,布局方式) 标签位置:JTabbedPane.TOP,JTabbedPane.BOTTOM,JTabbedPane.LEFT,JTabbedPane.RI ...
- Java分割面板和选项卡面板的应用
1.分割面板 JSplitPane类的常用构造方法 构造方法 说明 JSplitPane() 创建一个默认的分割面板.默认情况下为在水平方向上分割,重绘方式为只在调整分隔条位置完成时重绘 JSplit ...
- Ext选项卡tabpanel切换动态加载数据
鸣人不说暗话,来张图: 代码开始:(使用Ext,ajax加载数据,如果你们有好的方法也可以多多交流)var tabxsk = new Object(); //初始化 tabxsk.init = fun ...
- [转载]ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下 ...
- Ext查询面板收缩时，文本内容垂直显示
css添加如下样式/***查询面板收缩时,文本内容垂直显示**/.x-layout-collapsedText{ width:16px; font-size:11px; word-wrap:break ...
- iframe和选项卡面板切换
<div class="col-sm-6"> <div class="tabs-container"> <ul class=&qu ...
- Ext 中xtype一览
基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton ...
随机推荐
- PHP FILTER_SANITIZE_STRING 过滤器
定义和用法 FILTER_SANITIZE_STRING 过滤器去除或编码不需要的字符. 该过滤器删除那些对应用程序有潜在危害的数据.它用于去除标签以及删除或编码不需要的字符. Name: " ...
- Python基础教程（011）--程序开发中的错误及原因
前言 排查代码开发中的错误 内容 1,编写的程序不能正常执行,或者执行的结果不是我们期望的 2,俗称bug,是程序开发常见的,初学常见的原因有 手误 对已经学习的知识点理解不足 对语音还有需要学习和提 ...
- 极限IO优化
namespace IO{ #define BUF_SIZE 100000 #define OUT_SIZE 100000 #define ll long long //fread->read ...
- ZROI week4
考试 前言 起晚了,大概10点才开始看T1,被别人问了T2有点懵逼. 和 这题看了就A掉了,感觉很像原题的样子,是我的错觉吗?? 串串 某神仙有个\(O(n)\)做法问了我一下,我当时也没怎么想(因为 ...
- 分布式系统理论基础2 ：CAP
本文转自:https://www.cnblogs.com/bangerlee/p/5328888.html 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到 ...
- Python错误 importModuleNotFoundError: No module named 'Crypto'
0x00经过 今天在python中导入模块的用 from Crypto.Cipher import AES 的时候出现了找不到模块的错误. 百度了很长时间有很多解决方法,但是因不同的环境不同的 ...
- Micro SQL Server2016
Microsoft SQL Server 2016 序列号(中英文通用) SQL Server 2016 企业版: MDCJV-3YX8N-WG89M-KV443-G8249SQL Server 2 ...
- sql server 与 oracle的区别（转）
--1.数据类型不同. --sql server 的数据类型:int ,smallint ,char,varchar,nchar,nvarchar,ntext,datetime,smalld ...
- Spingboot整合Redis，用注解（@Cacheable、@CacheEvict、@CachePut、@Caching）管理缓存
背景:项目从头开始,需结合Springboot和Redis 需求:用注解管理缓存 方法: 一.用Redis取代Springboot原有缓存 1.pom引入依赖 2.applicatio ...
- spark性能调优05-troubleshooting处理
1.调节reduce端缓冲区大小避免OOM异常 1.1 为什么要调节reduce端缓冲区大小 对于map端不断产生的数据,reduce端会不断拉取一部分数据放入到缓冲区,进行聚合处理: 当map端数据 ...