タブパネルを利用して複数タブができると、閉じるのが面倒です。

ExtJSのサンプルの中に出てくるExt.ux.TabCloseMenuを改造して

タブの部分をクリックして「閉じる」、「その他を閉じる」、「全部閉じる」をコンテキストメニューを出してみます。

サンプルデモ：TabCloseMenu

/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */
// Very simple plugin for adding a close context menu to tabs

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);
                        }
                    });
                }
            }, {
                id: tabs.id + '-close-all',
                text: '全部閉じる',
                handler: function(){
                    tabs.items.each(function(item){
                        if (item.closable) 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);
        menu.showAt(e.getPoint());
    }
};

プラグインなので以下のように適用したTabPanelに組み込んでください。

{

xtype='tabpanel',

plugins: new Ext.ux.TabCloseMenu(),

}

Tweet