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 ...
随机推荐
- Python基础教程（003）--Python的设计目标
前言 了解Python的设计目标,这节是了解Python的背景,不需要掌握,但是需要你知道有这个东西.就是Python的目的是什么.作者开发这个Python语言的目的是什么. 知识点 一门简单直观的语 ...
- 数组转xls格式的excel文件&数据转csv格式的excle
/** * 数组转xls格式的excel文件 * @param array $data 需要生成excel文件的数组 * @param string $filename 生成的excel文件名 * 示 ...
- 树莓派2代 B型 4核 1G内存 raspberry pi 2 model B
树莓派技术交流群:318799602 期盼已久的PI2 已经到货,Element14版,非RS版本.诚信卖家如期发货,不会像某些淘宝卖家一样,没有货还标注现货,发货时间一拖再拖. 树莓派的最新力作!! ...
- linux kafka进程挂了 自动重启
使用crontab,定时监控 kafka进程,发现挂了后重启. shell脚本如下: #!/bin/sh source /etc/profile proc_dir="/data/kafka& ...
- CSS样式初始化代码
CSS样式初始化代码 为什么要初始化CSS? 建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化 ...
- Git命令操作
安装配置 将其bin目录添加到path ssh -keygen -t rsa -C 自己的邮箱(获取ssh远程连接秘钥) 使用: 进入项目目录 右击进入git bash 执行git init gith ...
- django 重写 mysql 连接库实现连接池
django 重写 mysql 连接库实现连接池 问题 django 项目使用 gunicorn + gevent 部署,并设置 CONN_MAX_AGE 会导致 mysql 数据库连接数飙升,在高并 ...
- PAT_A1100#Mars Numbers
Source: PAT A1100 Mars Numbers (20 分) Description: People on Mars count their numbers with base 13: ...
- h5唤醒手机拨打电话
jquery : $("#a").attr("href","tel:110");
- redis zset 介绍
$key = 'key'; //新增 zadd($key,分数,标识) //删除某个标识 zrem($key,标识) //查询某个标识的排名(从0开始的 所有在输出的时候要加一) zrevrank($ ...