<!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. 2018-2019-2 20175223 实验三《敏捷开发与XP实践》实验报告

    目录 北京电子科技学院(BESTI)实验报告 实验名称:实验三 敏捷开发与XP实践 实验内容.步骤与体会: 一.实验三 敏捷开发与XP实践-1 二.实验三 敏捷开发与XP实践-2 三.实验三 敏捷开发 ...

  2. 56、salesforce学习笔记（三）

    Date类型 Datetime nowDatetime = Datetime.now(); Datetime datetime1 = Datetime.newInstance(2015,3,1,13, ...

  3. 52、saleforce 第一篇

    View the Schema 1.点击setup 2.在QuickFind and Search中输入Schema Builder 先点击clear all 去除所有现实的UML,然后选择Line_ ...

  4. 使用Github SSH Key来避免Hexo部署时输入账户密码

    博客原文:http://fengyao.me/2016/04/10/use-git-ssh-key-carry-hexo-deploy/ 前言 当hexo使用https方式连接Github时,每次执行 ...

  5. Openstack组件实现原理 — Keystone认证功能

    目录 目录 前言 Keystone安装列表 Keystone架构 Keystone的管理对象 一个理解Keystone管理对象功能的例子 Keystone管理对象之间的关系 Keystone V3的新 ...

  6. jquery中attr方法和prop方法的区别

    关于checked的属性,最重要的概念就是你要记住,它跟checked的状态值是毫无关系的,设置checked = "checked"或者checked = "true& ...

  7. keepalive+Haproxy

    1.keepalive Keepalived 是一款轻量级HA集群应用,它的设计初衷是为了做LVS集群的HA,即探测LVS健康情况,从而进行主备切换,不仅如此,还能够探测LVS代理的后端主机的健康状况 ...

  8. vue中按需引入mint-UI报Error: .plugins[3][1] must be an object, false, or undefined

    { "presets": ["@babel/preset-env", "@babel/preset-react"], "plugi ...

  9. python#父与子编程之旅-11嵌套与可变循环

    for multiplier in range(5,8): for i in range(2,11): print(i,"x",multiplier,"=",i ...

  10. 观察者模式JDK源码解析

    由于JDK中为了方便开发人员,已经写好了现成的观察者接口和被观察者类. 先来观察者接口: //观察者接口,每一个观察者都必须实现这个接口 public interface Observer { //这 ...