<!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. 使用Ueditor点击上传图片时显示延迟的问题

    最近在做一个项目,需要用到Ueditor,但是在点击上传图片的时候,总是隔了4-5秒才显示文件框 查了一些资料,最后发现,只需在 修改:(1) dialog/images/image.js 把imag ...

  2. PHP rewinddir() 函数

    打开一个目录,列出其中的文件,充值目录句柄,重新列出其中的文件,然后关闭: <?php$dir = "/images/"; // Open a directory, and ...

  3. UNP学习第九章 基本名字与地址转换

    之前都用数值地址来表示主机(206.6.226.33),用数值端口号来标识服务器. 然而,我们应该使用名字而不是数值:名字比较容易记,数值地址可以改变但名字保持不变. 随着往IPv6上转移,数值地址变 ...

  4. 【Flutter学习】页面跳转之SliverAppBar,CustomScrollView,NestedScrollView的使用

    一,flutter SliverAppbar 控件介绍 SliverAppBar “应用栏” 相当于升级版的 appbar 于 AppBar 位置的固定的应用最上面的; 而 SliverAppBar ...

  5. Service系统服务(四)：搭建单区域DNS服务器、特殊DNS解析、配置DNS子域授权、搭建并测试缓存DNS

    一.搭建单区域DNS服务器 目标: 本例要求要求为DNS区域tedu.cn搭建一台DNS服务器,以便用户能通过域名的方式访问网站.测试阶段主要提供以下正向记录: svr7.tedu.cn ---> ...

  6. ubuntu下安装apidoc

    1.到http://nodejs.cn/download/下载nodejs 可以复制链接 使用wget下载更加快速 选择对应的操作系统位数 下载到/usr/local/src 此处强烈不建议编译安装 ...

  7. 【从0到1，搭建Spring Boot+RESTful API+Shiro+Mybatis+SQLServer权限系统】06、Mybatis+SQLServer集成

    1.增加POM依赖 注意pagehelper插件,我重写过,可以到我的这篇文章了解https://www.cnblogs.com/LiveYourLife/p/9176934.html <dep ...

  8. USB仪器控制教程

    概观 本教程是为出发点使用NI-VISA与USB设备进行通信.它不打算作为一个起点,学习USB构架或USB通讯中使用的各种协议.阅读本教程后,您应该能够安装一个USB设备,并使用NI-VISA与该设备 ...

  9. 高水线 High water mark(HWM)

    所有的Oracle表都有一个容纳数据的上限(很像一个水库历史最高的水位),我们把这个上限称为“High water mark"或HWM.这个HWM是一个标记(专门有一个数据块来记录高水标记等 ...

  10. JasperReports教程

    JasperReports教程 Jasper报表是一个开源的Java报表引擎,是基于Java的,它没有自己的表达式语法. 由于JasperReports是一个Java类库,而不是针对最终用户,而是有针 ...