<!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的更多相关文章

  1. jQuery EasyUI 选项卡面板tabs使用实例精讲

    1. 对选项卡面板区域 div 设置 class=”easyui-tabs” 2. 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title) 3. 设置面板 fi ...

  2. 高级组件——选项卡面板JTabbedPane

    选项卡面板:JTabbedPane(标签位置,布局方式) 标签位置:JTabbedPane.TOP,JTabbedPane.BOTTOM,JTabbedPane.LEFT,JTabbedPane.RI ...

  3. Java分割面板和选项卡面板的应用

    1.分割面板 JSplitPane类的常用构造方法 构造方法 说明 JSplitPane() 创建一个默认的分割面板.默认情况下为在水平方向上分割,重绘方式为只在调整分隔条位置完成时重绘 JSplit ...

  4. Ext选项卡tabpanel切换动态加载数据

    鸣人不说暗话,来张图: 代码开始:(使用Ext,ajax加载数据,如果你们有好的方法也可以多多交流)var tabxsk = new Object(); //初始化 tabxsk.init = fun ...

  5. [转载]ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件

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

  6. ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件

    本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下 ...

  7. Ext查询面板收缩时，文本内容垂直显示

    css添加如下样式/***查询面板收缩时,文本内容垂直显示**/.x-layout-collapsedText{ width:16px; font-size:11px; word-wrap:break ...

  8. iframe和选项卡面板切换

    <div class="col-sm-6"> <div class="tabs-container"> <ul class=&qu ...

  9. Ext 中xtype一览

    基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton ...

随机推荐

  1. 【LeetCode 41】缺失的第一个正数

    题目链接 [题解] 先明确一点假设给的数字有n个. 那么最后的答案最情况下就是n+1 首先我们先判断一下所给的数组里面有没有1 如果没有直接返回1 否则. 把数组中所有的范围超过n或者小于1的数字全都 ...

  2. H5 调用 手机设备的功能

    1.调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效) <a href=" ...

  3. 探索Redis设计与实现11：使用快照和AOF将Redis数据持久化到硬盘中

    本文转自互联网 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial ...

  4. js千位符 | js 千位分隔符 | js 金额格式化

    js 千位分隔符 千位分隔符,其实就是数字中的逗号.依西方的习惯,人们在数字中加进一个符号,以免因数字位数太多而难以看出它的值.所以人们在数字中,每隔三位数加进一个逗号,也就是千位分隔符,以便更加容易 ...

  5. NtCallbackReturn是否导致了用户态栈的不平衡

    0:000> u ntdll!KiFastSystemCall ntdll!KiFastSystemCall: 7c92eb8b 8bd4 mov edx,esp 7c92eb8d 0f34 s ...

  6. 2019牛客多校第⑨场D Knapsack Cryptosystem(折半搜索)

    原题:https://ac.nowcoder.com/acm/contest/889/D 题意: 给定大小为n(<=36)的集合a,整数s,求a的一个和为s的子集(有且只有一个) 思路: 直接搜 ...

  7. 运维 04 Shell基础命令(二)

    Shell基础命令(二)   查看Linux的发行版 cat /etc/redhat-release cat /etc/os-release 查看系统用户的id信息 id 用户名 id root id ...

  8. cmd 运行 java 文件

    在安装好jdk 并配置好环境变量的情况下 原因一:没有指定class文件的路径 例如HI是变异好的class文件,并且在d:/RJAZB里面 如果写成 Java HI  则会报错 正确做法 java ...

  9. html5中利用FileReader来读取文件。

    利用FileReader来读取文件的能够来实现即时预览的效果,这个也是在html5中才有的功能. <!DOCTYPE html> <html lang="en"& ...

  10. FrameWork内核解析之WindowManagerService（一）中篇

    阿里P7Android高级架构进阶视频免费学习请点击:https://space.bilibili.com/474380680 1.WMS概述 WMS是系统的其他服务,无论对于应用开发还是Framew ...