Ext.TabPanel右键关闭panel窗口: 在ext 的例子里有 -

mr.lili

浏览: 154315 次
性别:
来自: 成都

最近访客更多访客>>

VeChar

devcang

crow_java

wqjqrgtgr

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ext.TabPanel右键关闭panel窗口: 在ext 的例子里有

EXT HTML

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Advanced Tabs</title>
    <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>
    
    <script type="text/javascript" >
//src="../ux/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){ // create context menu on first right click
            menu = new Ext.menu.Menu({
            items: [{
                id: tabs.id + '-close',
                text: 'Close Tab',
                handler : function(){
                    tabs.remove(ctxItem);
                }
            },{
                id: tabs.id + '-close-others',
                text: 'Close Other Tabs',
                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);
        var disableOthers = true;
        tabs.items.each(function(){
            if(this != item && this.closable){
                disableOthers = false;
                return false;
            }
        });
        items.get(tabs.id + '-close-others').setDisabled(disableOthers);
e.stopEvent();
        menu.showAt(e.getPoint());
    }
};
Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);
</script>
    <script type="text/javascript" >
Ext.onReady(function(){

    var tabs = new Ext.TabPanel({
        renderTo:'tabs',
        resizeTabs:true, // turn on tab resizing
        minTabWidth: 115,
        tabWidth:135,
        enableTabScroll:true,
        width:600,
        height:250,
        defaults: {autoScroll:true},
        plugins: new Ext.ux.TabCloseMenu()
    });

    // tab generation code
    var index = 0;
    while(index < 7){
        addTab();
    }
    function addTab(){
        tabs.add({
            title: 'New Tab ' + (++index),
            iconCls: 'tabs',
            html: 'Tab Body ' + (index) + '<br/><br/>',
                    //+ Ext.example.bogusMarkup,
            closable:true
        }).show();
    }

    new Ext.Button({
        text: 'Add Tab',
        handler: addTab,
        iconCls:'new-tab'
    }).render(document.body, 'tabs');
});

</script>

    
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
    
    <div id="tabs" style="margin:15px 0;"></div>
</body>
</html>

分享到：