本篇讲解选项卡控件。

一、基本选项卡

首先我们来定义一个基本的选项卡控件，其中每个Tab各有不同，Tab的正文内容可以有三种方式获取：

1.基本方式:通过定义html和items的方式。

2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。

3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。

另外，每个tab都可以设置是否可关闭，进入tab时的事件，以及tab是否可用，具体情况请看代码：

[html]

?
1
2
3
4
5
6
7
8
9
10
<h1>基本选项卡</h1>
<div class="content" style="height: 150px">
    <div id="tabPanel">
        <div style="display: none">
            <div id="oneTab">
                <p>这个tab所展示的内容是读取至其他HTML标签</p>
            </div>
        </div>
    </div>
</div>

[Js]

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//1.基本的选项卡
var tabs1 = Ext.createWidget('tabpanel', {
    renderTo: "tabPanel",
    activeTab: 1,                       //指定默认的活动tab
    width: 600,
    height: 120,
    plain: true,                        //True表示tab候选栏上没有背景图片（默认为false）
    enableTabScroll: true,              //选项卡过多时，允许滚动
    defaults: { autoScroll: true },
    items: [{
        id: "tab1",
        title: '普通Tab',
        html: "这只是一个非常普通的Tab。",
        items:[{xtype:'button',text:'按钮'}],
        closable: true                  //这个tab可以被关闭
    }, {
        id: "tab2",
        title: '内容来至div',
        contentEl: 'oneTab'             //指定了当前tab正文部分从哪个html元素读取
    }, {
        id: "tab3",
        title: 'Ajax Tab',
        autoLoad: { url: 'AjaxTabContent', params: { data: "从客户端传入的参数" }, method: 'GET' }
    }, {
        id: "tab4",
        title: '事件Tab',
        listeners: { activate: handleActivate },
        html: "带事件的Tab。"
    }, {
        id: "tab5",
        title: '不可用Tab',
        disabled: true,
        html: "不可用的Tab，你是看不到我的。"
    }]
});
//单击tab4后触发的事件
function handleActivate(tab) {
    alert(tab.title + ': activated事件触发。');
}

我们查看一下生成的选项卡效果：

二、操作选项卡

选项卡生成后，我们可以通过js去操作它，比如动态新增、删除、插入选项卡，设置活动选项卡等，我们看看具体实现方法：

[html]

?
1
2
<h1>操作选项卡</h1>
<div class="content" id="content2"></div>

[Js]

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var index = 0;
//新增一个Tab
Ext.createWidget("button", {
    text: "新增一个Tab",
    renderTo: 'content2',
    handler: function () {
        tabs1.add({
            title: '新Tab ' + (++index),
            id: "newTab" + index,
            html: '选项卡文本部分 ' + (index) + '<br/><br/>',
            closable: true
        });
    }
});
//插入一个Tab
Ext.createWidget("button", {
    text: "在2号位置插入新Tab",
    renderTo: 'content2',
    handler: function () {
        tabs1.insert(2, {
            title: '新Tab ' + (++index),
            id: "newTab" + index,
            html: '选项卡文本部分 ' + (index) + '<br/><br/>',
            closable: true
        });
    }
});
//删除一个Tab
Ext.createWidget("button", {
    text: "删除2号位置的Tab",
    renderTo: 'content2',
    handler: function () {
        tabs1.remove(2);
    }
});
//删除id为“tab1”的Tab
Ext.createWidget("button", {
    text: "删除id为“tab1”的Tab",
    renderTo: 'content2',
    handler: function () {
        tabs1.remove("tab1");
    }
});
//删除id为“tab1”的Tab
Ext.createWidget("button", {
    text: "设置第三个Tab为活动tab",
    renderTo: 'content2',
    handler: function () {
        tabs1.setActiveTab(2);
    }
});

效果：

三、选项卡按钮在下方

默认的选项卡按钮在上方，我们可以随意定义选项卡按钮的位置，下面代码演示了具体的用法：

[html]

?
1
2
<h1>选项卡按钮在下方</h1>
<div class="content" id="content3"></div>

[Js]

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//选项卡按钮在下方
var tabs3 = Ext.createWidget('tabpanel', {
    renderTo: "content3",
    activeTab: 0,
    width: 600,
    height: 150,
    tabPosition: 'bottom'           //指定了选项卡的位置，left,right
});
for (var i = 0; i < 3; i++)
    tabs3.add({
        title: 'Tab ' + i,
        id: "Tabs3_" + i,
        html: '选项卡文本部分 ' + (index) + '<br/><br/>',
        closable: true
    });

效果：

四、可拖动的选项卡

通过官方扩展包我们可以增强选项卡控件的易用性，比如现在我们可以实现一个可以拖动选项卡按钮的功能：

[html]

?
1
2
<h1>可拖动的选项卡</h1>
<div class="content" id="content4"></div>

[Js]

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//首先要动态加载ux扩展的js
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '/ExtJs/ux');
Ext.require([
    'Ext.tip.QuickTipManager',
    'Ext.tab.Panel',
    'Ext.ux.TabScrollerMenu',
    'Ext.ux.TabReorderer',
    'Ext.ux.TabCloseMenu',
    'Ext.ux.GroupTabPanel'
]);
//以下是功能代码
    //可拖动的选项卡
    var tabs4 = Ext.createWidget('tabpanel', {
        renderTo: "content4",
        activeTab: 0,
        width: 600,
        height: 150,
        plugins: Ext.create('Ext.ux.TabReorderer'),
        items: [{
            xtype: 'panel',
            title: 'tab不可拖',
            html: "这个选项卡不可被拖动",
            reorderable: false,
            closable: true
        }]
    });
    for (var i = 0; i < 3; i++)
        tabs4.add({
            title: 'Tab ' + i,
            id: "Tabs4_" + i,
            html: '选项卡文本部分 ' + (index) + '<br/><br/>'
        });

效果如下，可见一个tab已经被移动：

五、过多选项卡的菜单式展示

如果面板上的选项卡打开的过多而显示不下，那么需要对溢出的选项卡用菜单的方式展示出来，实现方式如下，注意要引入扩展的css样式：

[html]

?
1
2
<h1>过多选项卡的菜单式展示</h1>
<div class="content" id="content5"></div>

[Js]

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//选项卡过多溢出时菜单显示
var tabs5 = Ext.createWidget('tabpanel', {
    renderTo: "content5",
    activeTab: 0,
    width: 600,
    height: 150,
    plugins: Ext.create('Ext.ux.TabScrollerMenu', {
        maxText: 15,
        pageSize: 5
    }),
    items: [{
        title: 'tab0',
        html: '第一个tab'
    }]
});
Ext.defer(function () {
    var myTabs = [];
    for (var i = 0; i < 15; i++) {
        myTabs.push({
            title: 'Tab ' + i,
            id: "Tabs5_" + i,
            html: '选项卡文本部分 ' + (index) + '<br/><br/>'
        });
    }
    tabs5.add(myTabs);
}, 1000);

效果：

六、选项卡的右键菜单

一般的应用程序都支持在选项卡按钮上面通过右键的方式去关闭多余的选项卡，在ext中也可以做到，实现方法如下：

[html]

?
1
2
<h1>选项卡的右键菜单</h1>
<div class="content" id="content6"></div>

[Js]

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//选项卡的右键菜单
var currentItem;
var tabs6 = Ext.createWidget('tabpanel', {
    renderTo: "content6",
    activeTab: 0,
    width: 600,
    height: 150,
    plugins: Ext.create('Ext.ux.TabCloseMenu', {
        closeTabText: '关闭当前',
        closeOthersTabsText: '关闭其他',
        closeAllTabsText: '关闭所有',
        extraItemsTail: [
                    '-',
                    {
                        text: '可关闭',
                        checked: true,
                        hideOnClick: true,
                        handler: function (item) {
                            currentItem.tab.setClosable(item.checked);
                        }
                    }
                ],
        listeners: {
            aftermenu: function () {
                currentItem = null;
            },
            beforemenu: function (menu, item) {
                var menuitem = menu.child('*[text="可关闭"]');
                currentItem = item;
                menuitem.setChecked(item.closable);
            }
        }
    }),
    items: [{
        title: 'tab1',
        html: '第一个tab'
    }, {
        title: 'tab2',
        closable: true,
        html: '第二个tab'
    }, {
        title: 'tab3',
        closable: true,
        html: '第三个tab'
    }]
});

效果：

七、分组式选项卡

我们还可以对选项卡进行分组，具体实现如下：

[html]

?
1
2
<h1>分组式选项卡</h1>
<div class="content" id="content7"></div>

[Js]

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//分组式选项卡
var tabs7 = Ext.create('Ext.ux.GroupTabPanel', {
    activeGroup: 0,             //设置当前活动的分组
    items: [{
        expanded: false,
        mainItem: 1,            //设置主要的item，这个tab会在最上面，以文件夹方式展示出来。
        items: [{
            title: '项目1',
            html: "<b>第一组第一项正文。</b>"
        }, {
            title: '项目2',
            border: false,
            html: "<b>第一组第二项正文。</b>"
        }, {
            title: '项目3',
            border: false,
            html: "<b>第一组第三项正文。</b>"
        }]
    }, {
        expanded: true,
        items: [{
            title: '项目1',
            html: "<b>第二组第一项正文。</b>"
        }, {
            title: '项目2',
            html: "<b>第二组第二项正文。</b>"
        }]
    }]
});
Ext.create('Ext.Panel', {
    renderTo: "content7",
    width: 600,
    height: 250,
    collapsible: true,
    layout: 'fit',
    title: '分组tab演示',
    items: tabs7
});

效果：

转载于:https://www.cnblogs.com/webu/archive/2012/10/22/2733431.html

ExtJs4 笔记 Ext.tab.Panel 选项卡相关推荐

  1. [转载]ExtJs4 笔记（10） Ext.tab.Panel 选项卡

    作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/) 版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其 ...

  2. ExtJs4 Ext.tab.Panel 选项卡

    一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他html的信息:通过设 ...

  3. Ext.tab.Panel 选项卡

    1.基本标签的容器中. TabPanels可以使用完全一样的标准Ext.panel.Panel布局的目的,但也有包含正在使用CardLayout布局管理器管理的子组件(项目)的特殊支持,并显示为单独的 ...

  4. Ext.tab.Panel页签

    Ext.tab.Panel页签组件的每个tab都是一个Ext.panel.Panel,一般情况会有多个tab同时存在,但是同一时刻只有一个处于激活状态. Ext.tab.Panel主要配置项目表: 配 ...

  5. ExtJs4 笔记（3） Ext.Ajax 对ajax的支持

    原文地址为: ExtJs4 笔记(3) Ext.Ajax 对ajax的支持 <回到系列目录 本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事件操作封装,还有扩展 ...

  6. Ext.grid.Panel表格分页

    Ext.grid.Panel表格分页示例 代码: cshtml @{Layout = null; } <!DOCTYPE html> <html> <head>&l ...

  7. 完善ext.grid.panel中的查询功能(紧接上一篇)

    今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...

  8. 使用Ext.grid.Panel显示远程数据

    使用Ext.grid.Panel显示远程数据 对于Ext.grid.Panel而言,它只是负责显示Store数组中心的数据,至于Store保存的数据到底是浏览器本地数据,还是远程服务器的数据,Ext. ...

  9. jQueryEasyUI框架 - panel 选项卡高度自适应

    jQueryEasyUI框架 - panel 选项卡高度自适应 框架的高度自适应问题,基本上都会遇到,这里无非就是样式的问题. 只需要设置外围的父级标签属性:height:auto;即可实现高度自适应 ...

最新文章

  1. linux tar命令 打包 解压
  2. Stanford UFLDL教程 稀疏自编码器符号一览表
  3. 与非CCR代码互操作
  4. vue 得到枚举个数_Package - vue-enum
  5. 十大笔记本品牌型号命名规则【联想】
  6. FFMPEG结构体分析：AVStream
  7. error LNK2019: 无法解析的外部符号 ，该符号在函数 中被引用
  8. Diamond软件的使用(6)--Lattice原语基本概念
  9. 录制GIF动画 MAC
  10. VS2010中打开项目中的Winform界面报“This method explicitly users CAS policy,which has been obsoleted by the ...”
  11. html遇到英文单词整体换行,HTML在table中如何强制单词换行
  12. 绍耕反失败学课程（01）— —人生只做一件事
  13. python 回溯法 01背包问题_01背包问题（回溯法）python实现
  14. 852955-00-1，Cyclo(D-Trp-Tyr)，大环化合物
  15. 在excel中如何筛选重复数据_Excel数据筛选操作总结之数据透视表
  16. python批量移动文件到指定文件夹_使用python批量将文件夹中的文件移动到某个文件夹下...
  17. WebPack的安装及使用
  18. 计算机资源管理器出问题怎么办,W7系统资源管理器已停止工作怎么办
  19. 常用的Linux发行版
  20. EXECL打开密码暴力破解

热门文章

  1. vue-cli3使用cdn引入
  2. react --- render持续调用解决方案
  3. Webpack进阶（三）
  4. Ping, IPConfig, Format, Netstat, etc. Not Recognized as Commands
  5. 偷学Office 2007之易用性改造
  6. QT右键点击添加库不响应的解决办法
  7. 五轴加工的RTCP技术
  8. 深度学习基础（二）激活函数
  9. matlab铣削,基于MATLAB的微细铣削力分析
  10. python字符串去头尾_带你认识优秀的python代码