<!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. 探索Redis设计与实现1：Redis 的基础数据结构概览

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

  2. 前端每日实战：71# 视频演示如何用纯 CSS 创作一个跳 8 字型舞的 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gKNMMm 可交互视频 此视频是可 ...

  3. Redis缓存接入监控、运维平台CacheCloud

    改造RedisConnectionFactory /** * 根据缓存策略的不同,RedisConnectionFactory不同 * 示例是单机模式. * * @return */@Beanpubl ...

  4. Django中ORM对数据库的增删改查操作

         前言 什么是ORM?  ORM(对象关系映射)指用面向对象的方法处理数据库中的创建表以及数据的增删改查等操作. 简而言之,就是将数据库的一张表当作一个类,数据库中的每一条记录当作一个对象.在 ...

  5. python实现人民币大写转换

    问题描述: 银行在打印票据的时候,常常需要将阿拉伯数字表示的人民币金额转换为大写表示,现在请你来完成这样一个程序. 在中文大写方式中,0到10以及100.1000.10000被依次表示为: 零 壹 贰 ...

  6. Linux下tomcat启动慢，阻塞

    声明:本文为转载,请尊重版权,原文地址: https://www.cnblogs.com/songjinju/p/7505564.html 这两天在linux部署完tomcat以后,发现每次启动都非常 ...

  7. Device Drivers

    Types of Device Drivers Windows可能会有User-mode的驱动,但是我们只关注Kernel-Mode的驱动. WDM Drivers WDM是一种驱动模型,是比较常用的 ...

  8. git操作的日常用法

    参考博客:  https://blog.csdn.net/afei__/article/details/51567155# 最近一段时间总结一些git在个人日常开发当中用到的方法, 并记录下来, 同时 ...

  9. layui点击图片放大-多图显示

    layui点击图片放大-多图显示 标签(空格分隔): js HTML // div <div id="photo-list"> <img class=" ...

  10. Spring整合Hibernate报错：annotatedClasses is not writable or has an invalid setter method

    Spring 整合Hibernate时报错: org.springframework.beans.factory.BeanCreationException: Error creating bean ...