Ext.tab.Panel页签
Ext.tab.Panel页签组件的每个tab都是一个Ext.panel.Panel，一般情况会有多个tab同时存在，但是同一时刻只有一个处于激活状态。
Ext.tab.Panel主要配置项目表：
| 配置项 | 参数类型 | 说明 |
|---|---|---|
| activeTab | String/Number | 设置默认激活的tab也，参数为tab页的id或索引值 |
| layout | Object | tabPanel内置的card布局 |
| minTabWidth | Number | tab标签的最小宽度，默认为30 |
| plain | Boolean | true则不显示TabBar的完整背景，默认为false |
| removePanelHeader | Boolean | true则通知子元素全部不渲染header标题栏，这样可以防止子元素标题重复显示2次，默认为true |
| tabBar | Object | 配置内置Ext.tab.TabBar的配置对象 |
| tabPosition | String | 设置页签按钮的显示位置，有效值为top和bottom，默认为top |
Ext.tab.Bar主要配置项目表：
| 配置项 | 参数类型 | 说明 |
|---|---|---|
| maxTabWidth | Number | 设置标签按钮的最大宽度 |
| minTabWidth | Number | 设置标签按钮的最小宽度 |
| plain | Boolean | true则不显示TabBar的完整背景，默认为false |
1、通过items添加标签页
代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>Ext.tab.Panel</title>
5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 Ext.onReady(function () {
9 Ext.create("Ext.tab.Panel", {
10 title: "Ext.tab.Panel示例",
11 frame: true,
12 height: 150,
13 width: 300,
14 activeTab: 1, // 默认激活第2个tab页
15 renderTo: Ext.getBody(),
16 items: [{
17 title: "tab标签页1",
18 html: "tab标签页1内容"
19 }, {
20 title: "tab标签页2",
21 html: "tab标签页2内容"
22 }, {
23 title: "tab标签页3",
24 html: "tab标签页3内容"
25 }, {
26 title: "tab标签页4",
27 html: "tab标签页4内容"
28 }, {
29 title: "tab标签页5",
30 html: "tab标签页5内容"
31 }, {
32 title: "tab标签页6",
33 html: "tab标签页6内容"
34 }]
35 });
36 });
37 </script>
38 </head>
39 <body>
40 </body>
41 </html>效果图：
2、动态添加标签页
代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>Ext.tab.Panel</title>
5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 Ext.onReady(function () {
9 var tabPanel = Ext.create("Ext.tab.Panel", {
10 title: "Ext.tab.Panel示例",
11 frame: true,
12 height: 150,
13 width: 300,
14 activeTab: 0, // 默认激活第一个tab页
15 renderTo: Ext.getBody(),
16 items: [{
17 title: "tab标签页1",
18 html: "tab标签页1内容"
19 }],
20 buttons: [{
21 text: "添加标签页",
22 handler: addTab
23 }]
24 });
25
26 function addTab() {
27 var index = tabPanel.items.length + 1;
28 var tab = tabPanel.add({
29 title: "tab标签页" + index,
30 html: "tab标签页" + index + "内容",
31 closable: true // 允许关闭
32 });
33
34 tabPanel.setActiveTab(tab); // 设置当前tab页
35 }
36 });
37 </script>
38 </head>
39 <body style="margin: 10px;">
40 </body>
41 </html>效果图：
转载于:https://www.cnblogs.com/libingql/archive/2012/04/10/2441328.html
Ext.tab.Panel页签相关推荐
- ExtJs4 笔记 Ext.tab.Panel 选项卡
本篇讲解选项卡控件. 一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他 ...
- AUI tab实现页签滑动切换且下拉刷新（下拉固定title栏及tab栏）
声明:菜鸟一枚,入坑不久,如有欠缺,望大神给予好的建议,完善优化,分享他人. AUI tab实现页签滑动切换且下拉刷新(下拉固定title栏及tab栏) 1:aui tab分页签,手动侧滑或点击TAB ...
- [转载]ExtJs4 笔记（10） Ext.tab.Panel 选项卡
作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/) 版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其 ...
- Ext.tab.Panel 选项卡
1.基本标签的容器中. TabPanels可以使用完全一样的标准Ext.panel.Panel布局的目的,但也有包含正在使用CardLayout布局管理器管理的子组件(项目)的特殊支持,并显示为单独的 ...
- ExtJs4 Ext.tab.Panel 选项卡
一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他html的信息:通过设 ...
- 【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
- 如何动态为 tabstrip 中的 tab 页签指定标题
网上居然搜不到相关的文章,所以我来写一篇吧. 其实就是两个要点,只要注意就行了. 首先,最重要的一点,在绘制屏幕的时候,给 tab 页签的属性指定为"输出字段",这时,它的&quo ...
- Bootstrap tab页签刷新加载不显示，只有点击其他标签后第一个才显示
Bootstrap tab页签刷新加载不显示,只有点击其他标签后第一个才显示 解决方法: 在tab-content里面的tab-pane中添加active <!-- 导航区 --> < ...
- Axure 9 实战案例，母版的应用 2，运用母版交互绘制Tab页签
前言 Hello!欢迎来到Axure 9 实战案例教程专栏.点击了解课程简介>> 上一篇教程我们讲解了运用母版绘制微信APP的导航菜单(点击阅读该教程>>),本篇教程我们继续来 ...
最新文章
- 工程能力提升管理之道
- 3D视觉工坊中秋国庆贺礼！
- python可以写桌面软件吗-用Python编写一个桌面软件系统的步骤是什么？
- 数据类型与数据传送指令
- node.js初探-超越昨天的自己系列（3）
- Hadoop入门（十三）远程提交wordCout程序到hadoop集群
- 马哥 linux 2015 nginx,Nginx安装及配置文件结构解析-马哥视频学习笔记
- dhclient常用命令
- 3-17Pytorch与线性代数运算
- 前端程序升级linux方案,开源：AspNetCore 应用程序热更新升级工具（全网第一份公开的解决方案）...
- Web前端Javascript笔记（6）正则表达式
- notepad++ python指定anaconda环境以及代码补全设置
- 区块链：关键阻力的突破会带来持续的积极情绪
- 操盘软件富赢版V7 2016正式版
- 大数据技术原理与应用答案 林子雨 第二版
- 【WLAN从入门到精通-基础篇】第1期——WLAN定义和基本架构
- 微信公众号开发详细笔记
- android手机之-------64位操作系统 与 64位处理器
- 住得越高越安静? 中间楼层噪音最大
- 樱花漫地集于我心，蝶舞纷飞祈愿相随 発生：genesis 发生：genesis