<!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. 洛谷 P2522 [HAOI2011]Problem b （莫比乌斯反演+简单容斥）

    题目描述 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. 输入输出格式 输入格式: 第一行一个整数 ...

  2. LG1010 幂次方

    题目描述 任何一个正整数都可以用2的幂次方表示.例如 137=2^7+2^3+2^0 同时约定方次用括号来表示,即a^b 可表示为a(b). 由此可知,137可表示为: 2(7)+2(3)+2(0) ...

  3. eclipse debug (调试)基础

    进入debug模式: 1.设置断点 2.启动servers端的debug模式 3.运行程序,在后台遇到断点时,进入debug调试状态 ============================= 作用域 ...

  4. SSH known_hosts / authorized_keys

    参考: http://blog.sina.com.cn/s/blog_148a693f10102vj8m.html 什么是SSH? 简单说,SSH是一种网络协议,用于计算机之间的加密登录. 如果一个用 ...

  5. php环境搭建以及优化

    WampServer 配置伪静态 httpd.conf文件 搜索找到“LoadModule rewrite_module modules/mod_rewrite.so”这一行,去掉前面的“#”: 搜索 ...

  6. 用 Flask 来写个轻博客 (11) — M(V)C_创建视图函数

    目录 目录 前文列表 视图函数 在 viewspy 文件中定义视图函数 定义右侧边栏的视图函数 为每一张数据表定义视图函数 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 Flask ...

  7. spss-数据清洗-处理重复数据

    spss-数据清洗-处理重复数据 数据导入之后就需要对数据进行清洗.数据清洗主要是对多余重复的数据筛选清除,将缺失的数据补充完整,将错误的数据纠正或者删除.接下来操作如何将重复数据处理操作. 步骤一: ...

  8. Linux基础-文件管理

    <1>查看文件信息:ls ls是英文单词list的简写,其功能为列出目录的内容,是用户最常用的命令之一,它类似于DOS下的dir命令. Linux文件或者目录名称最长可以有265个字符,“ ...

  9. volatile在嵌入式系统中的用法

    今天参加一家公司的嵌入式C语言笔试,其中有道主观题谈到在嵌入式系统中volatile变量的用法.平时学习C语言没怎么用到,只用到过static和extern的变量,很惭愧没答上来.嵌入式C语言笔试经常 ...

  10. HashSet源码解析笔记

    HashSet是基于HashMap实现的.HashSet底层采用HashMap来保存元素,因此HashSet底层其实比较简单. HashSet是Set接口典型实现,它按照Hash算法来存储集合中的元素 ...