选项卡TabPanel控件
选项面板是一个包括一个或多个选项卡(Tab)，同一时刻只显示一个选项卡的这种用户界面。比如下图的IE选项设置界面中，就是一个选项板的应用，选项板上有“常规”、“安全”、“隐私”等选项卡。
2、Ext.TabPanel
Ext中提供了选项板控件TabPanel，由类Ext.TabPanel来定义，该类直接继承自Ext.Panel，因此他实际上也是一个包含特定特性的面板。看下面的代码：
Ext.onReady(function(){
new Ext.TabPanel({
renderTo: Ext.getBody(),
width: 300,
height: 200,
enableTabScroll:true,
activeTab: 0,
items: [{
title:"面板1",html:"<h1>this is the first panel!</h1>"
}, {
closable : true,
title:"面板2",
html:"<h1>this is the second panel!</h1>"
}, {
closable : true,
title:"面板3",
html:"<h1>this is the third panel!</h1>"
}]
});
});
</script>
上面的代码定义了一个简单的选项面板，该面板中包含三个tab，初始化时显示第一个tab内容。
3、另外一种使用选项板的方式
也可以直接把html页面中符合特殊条件的DIV标签转换成选项板中的选项，此时需要在TabPanel的配置选项中把autoTabs项设置为true，把deferredRender项设置为false，然后通过applyTo项指定把页面中包含class="x-tab"这种样式的子节点的DOM节点应用于选项板。看下面的例子：
<meta http-equiv="description" content="This is my page">
<!-- 引入ExtJS样式文件 -->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/ext-3.2.0/resources/css/ext-all.css"/>
<!-- 引入ExtJS脚本库(两个，一个驱动adapter,另外一个ext-all.js) -->
<script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
new Ext.TabPanel({
applyTo: 'test',
activeTab: 0,
deferredRender: false,
autoTabs: true
});
});
</script>
</head>
<body>
<div id="test">
<div class="x-tab" title="选项1">A simple tab</div>
<div class="x-tab" title="选项2">Another one</div>
<div title="选项3">
<div class="x-tab" title="选项4">Another one</div>
</div>
</div>
</body>
由于“选项3”这个DIV标签的class不是x-tab所以不会转换成选项卡Tab，而“选项4”这个DIV虽然与“选项1”这些节点不在同一个层次，但仍然会把他作为Tab项来同等处理。
4、控制选项板的内容
选项板TabPanel中的选项Tab项可以在初始化的时候通过items时候指定，也可以在TabPanel对象创建以后，使用add()、insert()或remove等来动态添加或删除其中的选项卡Tab。为了演示对面板中tab的操作，我们可以给上面的程序简单的添加一个工具栏按钮，当点击按钮的时候在选项面板中动态添加tab。代码如下：
Ext.onReady(function(){
var i=0;
var tab=new Ext.TabPanel({
renderTo: Ext.getBody(),
width:500,
height:200,
enableTabScroll:true,
activeTab:0,
bbar:[{
text:"添加",
handler:function(){
tab.add({
title:"新面板"+i++,
closable : true
});
}
}],
items:[{
title:"面板1",
html:"<h1>this is the first panel!</h1>"
}, {
closable : true,
title:"面板2",
html:"<h1>this is the second panel!</h1>"
},{
closable : true,
title:"面板3",
html:"<h1>this is the third panel!</h1>"
}]
});
});
</script>
添加按钮的事件响应函数内容如下：
tab.add({title:"新面板"+i++,closable : true});
我们直接调用选项面板的add方法，就可以把一个面板添加到选项板中，成为一个新的tab。closeable表示该面板可以关闭，因此在tab上会出现一个关闭tab的图标，点击该图标可以关闭该面板。
可以使用迭代功能，实现批量关闭选项板TabPanel中的所有Tab，比如，可以在上面的bbar中，添加一个按钮来实现关闭所有打开的Tab，该按钮的定义代码如下：
text:"关闭所有面板",
handler: function(){
tab.items.each(function(p){
if(p.closable)tab.remove(p);
}
}
}
转载于:https://www.cnblogs.com/linjiqin/archive/2011/06/23/2088189.html
选项卡TabPanel控件相关推荐
- MFC中选项卡TabControl控件的用法
前言:我这里的开发环境是VS2010,其它不同的开发环境可能会有所差别,但绝不会差太多,其根本方法一般是不会变的. 选项卡控件(英文名:TabControl),这个控件使用在开发一些比较复杂,和用户交 ...
- Coolite Toolkit学习笔记八：常用控件TabPanel
TabPanel控件使用非常简单,但是功能却非常强大,它同MenuPanel.TreePanel一样提供了很多的集合属性,可以定制出丰富的应用.其中用得最多的就是他的Tabs属性,用于定义子标签选项, ...
- python选项卡控件_python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与...
PyQt5选项卡控件QTabWidget简介 QTabWidget控件提供了一个选项卡和一个页面区域,默认显示第一个选项卡的页面,通过单击各选项卡可以查看对应的界面,如果在一个窗口中显示的输入字段很多 ...
- Asp.Net Web控件 （八）（TabControl 选项卡控件）
在项目开发中经常会用到选项卡控件,网上也有很多,其实只是简单的功能,很多却实现的很复杂,功能很强大,并不是我需要的. 下面来实现一个简单的TabControl . 先看演示: 位置:TabContor ...
- 如何隐藏TPageControl Delphi控件的选项卡
The TPageControl Delphi control displays a set of pages used to make a multiple-page dialog box. Eac ...
- .NET 控件集 ComponentOne 2018V2正式发布，提供轻量级的 .NET BI 仪表板
ComponentOne Enterprise 是一款专注于企业应用 .NET开发的 Visual Studio 组件集,包含 300多种 .NET控件,支持 WinForm,WPF,UWP,ASP. ...
- AJAX之四 Ajax控件工具集
[学习目标] F 理解并掌握ScriptManager控件的使用 F 了解ScriptManager控件的使用 F 理解并掌握Timer控件的使用 F 理解并掌握UpdateP ...
- tabcontainer控件太长_AjaxControlToolKit--TabContainer控件的介绍收藏[摘录]
AjaxControlToolKit--TabContainer控件的介绍收藏 1. Introduction: Tab本身就应该是个以页签形式显示组织网页内容的一个控件.在AJAX Control ...
- tabcontainer控件太长_asp.net AjaxControlToolKit--TabContainer控件的介绍
AjaxControlToolKit--TabContainer控件的介绍收藏 1. Introduction: Tab本身就应该是个以页签形式显示组织网页内容的一个控件.在AJAX Control ...
最新文章
- 虚拟化部署之Hyper-V简介
- SpringBoot 上传多个文件
- php 创建数据库并填充,php操作mysql--连接数据库创建表填充表
- 计算机二级证学的什么,考计算机二级证需要学什么
- mysql where substr_mysql – 在WHERE子句中使用substr的SELECT语句
- AOP下的权限控制实现
- RTL8152网卡灯配置详细说明
- Android 实现一键加QQ群，一键加QQ好友
- ad10搜索快捷键_AD10快捷键解析
- 微信app用户及市场调研
- 当BTC大空头遇上PlusToken，投资竟然成为一门玄学？
- 【2016.11.28】纯HTML仿微博注册页面
- 近期DDG挖矿病毒防护与分析
- 掘金「跳转外链风险提示」实现思考
- APOLLO基本介绍
- 【ESP8266 ES01 小爱】使用ESP 8266 WOL 远程唤醒电脑
- hrbust 2242 沼跃鱼
- 360安全卫士，还有这么多，小兄弟?
- 前缀表达式与后缀表达式
- matlab fromstream,matlab安装问题求助