Ext.ux.TabCloseMenu插件的使用

tab在ext里很常用，在点开N个tab后，是否能通过右键菜单，关闭全部tab或关闭除此以外的全部tab，当然可以，使用Ext.ux.TabCloseMenu插件就可以轻松实现。


Ext.onReady(function(){
       //tab插件
   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);
         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());
      }
   };

   //layout
   var viewport = new Ext.Viewport({
      layout:'border',
      items:[
         new Ext.BoxComponent({
            region:'north',
            el: 'north',
            height:45
         }),new Ext.BoxComponent({
            region:'south',
            el: 'south',
            height:25
         }),{
            region:'west',
            id:'west-panel',
            split:true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            margins:'0 0 0 0',
            layout:'accordion',
            title:"",
            collapsible :true,
            layoutConfig:{
               animate:true
            },
            items: [
              
            ]
         },
           tab = new Ext.TabPanel({
            region:'center',
            deferredRender:false,
            activeTab:0,
            resizeTabs:true, // turn on tab resizing
            minTabWidth: 115,
            tabWidth:135,
            enableTabScroll:true,
            items:[{
               iconCls:'desk',
               title:"title"
            }],
            plugins: new Ext.ux.TabCloseMenu()
         })
       ]
   });
});