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>


效果图如下:


posted @ 2008-08-31 09:27  菩提树下的杨过  阅读(3547)  评论(1)  编辑  收藏  举报