ExtJs学习笔记(8)_TabPanel的用法

啥也不说了,直接上代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
 <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="../ext-all.js"></script> 
 <style type="text/css">
         *{font-size:12px;line-height:130%;} 
         .list {list-style:square;width:500px;padding-left:16px;}
         .list li{padding:2px;font-size:8pt;}
 
         pre {
            font-size:11px; 
 }
 
         .x-tab-panel-body .x-panel-body {
             padding:10px;
 }
 
 /* default loading indicator for ajax calls */
         .loading-indicator {
             font-size:8pt;
             background-image:url('../resources/images/default/grid/loading.gif');
             background-repeat: no-repeat;
             background-position: left;
             padding-left:20px;
 }
 
         .new-tab {
             background-image:url(../examples/feed-viewer/images/new_tab.gif) !important;
 }
 
         .tabs {
             background-image:url( ../examples/desktop/images/tabs.gif ) !important;
 }
 </style>
 <title>Tabs Demo</title>
 </head>
 <body>
 <script type="text/javascript">
     Ext.onReady(function() {
 
 var tabs = new Ext.TabPanel({
             renderTo: Ext.getBody(),
             resizeTabs: true, // turn on tab resizing
             minTabWidth: 115,
             tabWidth: 135,
             enableTabScroll: true,
             width: 600,
             height: 150,
             defaults: { autoScroll: true },
             plugins: new Ext.ux.TabCloseMenu(),
             tbar: [{ text: '新建Tab', iconCls: 'new-tab', handler: addTab}]
 
         });
 
 // tab generation code
  var index = 0;
 while (index < 2) {
             addTab();
         }
 
 function addTab(tab) {
 if (tabs.items.length > 9) {
                 Ext.MessageBox.alert("提示", "最多只能新建10个tab!");
 //tabs.tbar.setVisible(false);
  return false;
             }
             tabs.add({
                 title: 'New Tab ' + (++index),
                 iconCls: 'tabs',
                 html: 'Tab Body ' + (index) ,
                 closable: true
             }).show();
         }
 
     });
 
 
 
 //右键弹出菜单
     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) { // create context menu on first right click
                 menu = new Ext.menu.Menu([{
                     id: tabs.id + '-close',
                     text: '关闭当前',
                     handler: function() { tabs.remove(ctxItem); }
                 }, {
                     id: tabs.id + '-close-others',
                     text: '关闭其它',
                     handler: function() {
                         tabs.items.each(function(item) {
 if (item.closable && item != ctxItem) {
                                 tabs.remove(item);
                             }
                         });
                     }
 }]);
                 }
                 ctxItem = item;
 var items = menu.items;
 
                 items.get(tabs.id + '-close').setDisabled(!item.closable);               
 
 //                //只剩一个时,禁止关闭
 //                if (tabs.items.length == 1) {                   
 //                    items.get(tabs.id + '-close').setDisabled(true);
 //                }                
 
 var disableOthers = true;
                 tabs.items.each(function() {
 if (this != item && this.closable) {
                         disableOthers = false;
 return false;
                     }
                 });
                 items.get(tabs.id + '-close-others').setDisabled(disableOthers);
                 menu.showAt(e.getPoint());
             }
         };
 </script>
 </body>
 </html>
 

效果图如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏天天

基于cube-ui搭建移动端项目

cube-ui 搭配 webpack 2+ 支持后编译和普通编译 2 种构建方式(默认使用后编译),使用前都需要修改应用的依赖和配置。

51620
来自专栏smy

JS倒计时

<!--倒计时脚本--> <script type="text/javascript"> var CID = "endtime"; ...

1.1K120
来自专栏hbbliyong

Extjs 项目中常用的小技巧,也许你用得着(4)---Extjs 中的cookie设置

1.ExtJs设置cookie两种方式 其一:设置cookie如下 saveacct=isForm.getForm().findField('itemselec...

23830
来自专栏生信技能树

WashU EpiGenome Browser使用教程

WashU EpiGenome Browser 是我用过最赞的浏览器,没有之一。希望大伙跟着教程好好学习下! 还有更多教程见:http://epigenomeg...

671100
来自专栏程序员维他命

MJRefresh 源码解析

MJRefresh是李明杰老师的作品,到现在已经有1w+颗star了,是一个简单实用,功能强大的iOS下拉刷新(也支持上拉加载更多)控件。它的可定制性很高,几乎...

21320
来自专栏滕先生的博客

UIGestureRecognizer  手势识别一、概念介绍二、UIView 的分类三、UIGestureRecognizer 抽象类四、UIGestureRecognizerDelegate 代理

46880
来自专栏菩提树下的杨过

Silverlight:MouseDragElementBehavior无法应用于ListBox的变相解决办法

Blend自带的行为MouseDragElementBehavior应用到ListBox后,如果用鼠标按住列表列拖动,没有任何效果,在多次尝试中意外发现,如果将...

24580
来自专栏Google Dart

Flutter 构建完整应用手册-设计基础知识 顶

这本食谱包含演示如何在写Flutter应用程序时解决常见问题的食谱。 每个配方都是独立的,可以作为参考帮助您构建应用程序。

14510
来自专栏24K纯开源

一个简单的inno setup模板

一、模板代码     基本功能包括多路径安装、多语言、自定义图标。 [Setup] ShowLanguageDialog=yes AppCopyright=Co...

32650
来自专栏柠檬先生

Extjs grid 组件

表格面板类Ext.grid.Panel 重要的配置参数 columns : Array 列模式(Ext.grid.column.Columnxtype: gr...

29780

扫码关注云+社区

领取腾讯云代金券