开发者社区> 杨俊明> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 啥也不说了,直接上代码:   DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
+关注继续查看

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

 

<!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>


效果图如下:


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery easyui-datagrid/treegrid 清空数据参考
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/51862082   在使用easyui的treegrid或datagrid的过程经常会有这样的场景,如:需要按不同的类型加载数据时,如果选择的分类下没有数据应该把上次展示的数据清空,以免引用歧义。
836 0
kindeditor用法简单介绍
最近做毕业设计用了一个叫做kindeditor的文本编辑工具,相信很多人都用过,这货和fckeditor差不多,个人感觉这个的皮肤更好看,而且对中文的支持更好,没那么容易出现中文乱码问题。
792 0
ExtJs学习笔记(9)_Window的基本用法
以下就是ExtJs的官方示例,只不过加了几行注释,呵     Hello World Window Example                             .x-panel-body p {         margin:10px;         font-size:12px;     }          Ext.
548 0
+关注
杨俊明
菩提树下的杨过 http://yjmyzz.cnblogs.com/
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载