X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..ddde20c4d4ac6a8d53de079761155de813845b3c:/examples/ux/TabCloseMenu.js

diff --git a/examples/ux/TabCloseMenu.js b/examples/ux/TabCloseMenu.js
index 559f2c9c..4c36d7fd 100644
--- a/examples/ux/TabCloseMenu.js
+++ b/examples/ux/TabCloseMenu.js
@@ -1,58 +1,150 @@
 /*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-/**
- * @class Ext.ux.TabCloseMenu
- * @extends Object 
- * Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs.
- * 
- * @ptype tabclosemenu
- */
-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);
+/**
+ * @class Ext.ux.TabCloseMenu
+ * @extends Object 
+ * Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs. Note that the menu respects
+ * the closable configuration on the tab. As such, commands like remove others and remove all will not
+ * remove items that are not closable.
+ * 
+ * @constructor
+ * @param {Object} config The configuration options
+ * @ptype tabclosemenu
+ */
+Ext.ux.TabCloseMenu = Ext.extend(Object, {
+    /**
+     * @cfg {String} closeTabText
+     * The text for closing the current tab. Defaults to <tt>'Close Tab'</tt>.
+     */
+    closeTabText: 'Close Tab',
+
+    /**
+     * @cfg {String} closeOtherTabsText
+     * The text for closing all tabs except the current one. Defaults to <tt>'Close Other Tabs'</tt>.
+     */
+    closeOtherTabsText: 'Close Other Tabs',
+    
+    /**
+     * @cfg {Boolean} showCloseAll
+     * Indicates whether to show the 'Close All' option. Defaults to <tt>true</tt>. 
+     */
+    showCloseAll: true,
+
+    /**
+     * @cfg {String} closeAllTabsText
+     * <p>The text for closing all tabs. Defaults to <tt>'Close All Tabs'</tt>.
+     */
+    closeAllTabsText: 'Close All Tabs',
+    
+    constructor : function(config){
+        Ext.apply(this, config || {});
+    },
+
+    //public
+    init : function(tabs){
+        this.tabs = tabs;
+        tabs.on({
+            scope: this,
+            contextmenu: this.onContextMenu,
+            destroy: this.destroy
+        });
+    },
+    
+    destroy : function(){
+        Ext.destroy(this.menu);
+        delete this.menu;
+        delete this.tabs;
+        delete this.active;    
+    },
+
+    // private
+    onContextMenu : function(tabs, item, e){
+        this.active = item;
+        var m = this.createMenu(),
+            disableAll = true,
+            disableOthers = true,
+            closeAll = m.getComponent('closeall');
+        
+        m.getComponent('close').setDisabled(!item.closable);
+        tabs.items.each(function(){
+            if(this.closable){
+                disableAll = false;
+                if(this != item){
+                    disableOthers = false;
+                    return false;
+                }
+            }
+        });
+        m.getComponent('closeothers').setDisabled(disableOthers);
+        if(closeAll){
+            closeAll.setDisabled(disableAll);
+        }
+        
+        e.stopEvent();
+        m.showAt(e.getPoint());
+    },
+    
+    createMenu : function(){
+        if(!this.menu){
+            var items = [{
+                itemId: 'close',
+                text: this.closeTabText,
+                scope: this,
+                handler: this.onClose
+            }];
+            if(this.showCloseAll){
+                items.push('-');
+            }
+            items.push({
+                itemId: 'closeothers',
+                text: this.closeOtherTabsText,
+                scope: this,
+                handler: this.onCloseOthers
+            });
+            if(this.showCloseAll){
+                items.push({
+                    itemId: 'closeall',
+                    text: this.closeAllTabsText,
+                    scope: this,
+                    handler: this.onCloseAll
+                });
+            }
+            this.menu = new Ext.menu.Menu({
+                items: items
+            });
+        }
+        return this.menu;
+    },
+    
+    onClose : function(){
+        this.tabs.remove(this.active);
+    },
+    
+    onCloseOthers : function(){
+        this.doClose(true);
+    },
+    
+    onCloseAll : function(){
+        this.doClose(false);
+    },
+    
+    doClose : function(excludeActive){
+        var items = [];
+        this.tabs.items.each(function(item){
+            if(item.closable){
+                if(!excludeActive || item != this.active){
+                    items.push(item);
+                }    
+            }
+        }, this);
+        Ext.each(items, function(item){
+            this.tabs.remove(item);
+        }, this);
+    }
+});
+
+Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);
\ No newline at end of file