Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / examples / ux / GroupTab.js
index 0fa0a72..c3269f4 100644 (file)
 /*!
 /*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.1
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-Ext.ux.GroupTab = Ext.extend(Ext.Container, {\r
-    mainItem: 0,\r
-    \r
-    expanded: true,\r
-    \r
-    deferredRender: true,\r
-    \r
-    activeTab: null,\r
-    \r
-    idDelimiter: '__',\r
-    \r
-    headerAsText: false,\r
-    \r
-    frame: false,\r
-    \r
-    hideBorders: true,\r
-    \r
-    initComponent: function(config){\r
-        Ext.apply(this, config);\r
-        this.frame = false;\r
-        \r
-        Ext.ux.GroupTab.superclass.initComponent.call(this);\r
-        \r
-        this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');\r
-        \r
-        this.setLayout(new Ext.layout.CardLayout({\r
-            deferredRender: this.deferredRender\r
-        }));\r
-        \r
-        if (!this.stack) {\r
-            this.stack = Ext.TabPanel.AccessStack();\r
-        }\r
-        \r
-        this.initItems();\r
-        \r
-        this.on('beforerender', function(){\r
-            this.groupEl = this.ownerCt.getGroupEl(this);\r
-        }, this);\r
-        \r
-        this.on('add', this.onAdd, this, {\r
-            target: this\r
-        });\r
-        this.on('remove', this.onRemove, this, {\r
-            target: this\r
-        });\r
-        \r
-        if (this.mainItem !== undefined) {\r
-            var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);\r
-            delete this.mainItem;\r
-            this.setMainItem(item);\r
-        }\r
-    },\r
-    \r
-    /**\r
-     * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which\r
-     * can return false to cancel the tab change.\r
-     * @param {String/Panel} tab The id or tab Panel to activate\r
-     */\r
-    setActiveTab : function(item){\r
-        item = this.getComponent(item);\r
-        if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){\r
-            return;\r
-        }\r
-        if(!this.rendered){\r
-            this.activeTab = item;\r
-            return;\r
-        }\r
-        if(this.activeTab != item){\r
-            if(this.activeTab && this.activeTab != this.mainItem){\r
-                var oldEl = this.getTabEl(this.activeTab);\r
-                if(oldEl){\r
-                    Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');\r
-                }\r
-                this.activeTab.fireEvent('deactivate', this.activeTab);\r
-            }\r
-            var el = this.getTabEl(item);\r
-            Ext.fly(el).addClass('x-grouptabs-strip-active');\r
-            this.activeTab = item;\r
-            this.stack.add(item);\r
-\r
-            this.layout.setActiveItem(item);\r
-            if(this.layoutOnTabChange && item.doLayout){\r
-                item.doLayout();\r
-            }\r
-            if(this.scrolling){\r
-                this.scrollToTab(item, this.animScroll);\r
-            }\r
-\r
-            item.fireEvent('activate', item);\r
-            this.fireEvent('tabchange', this, item);\r
-        }\r
-    },\r
-    \r
-    getTabEl: function(item){\r
-        if (item == this.mainItem) {\r
-            return this.groupEl;\r
-        }\r
-        return Ext.TabPanel.prototype.getTabEl.call(this, item);\r
-    },\r
-    \r
-    onRender: function(ct, position){\r
-        Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);\r
-        \r
-        this.strip = Ext.fly(this.groupEl).createChild({\r
-            tag: 'ul',\r
-            cls: 'x-grouptabs-sub'\r
-        });\r
-\r
-        this.tooltip = new Ext.ToolTip({\r
-           target: this.groupEl,\r
-           delegate: 'a.x-grouptabs-text',\r
-           trackMouse: true,\r
-           renderTo: document.body,\r
-           listeners: {\r
-               beforeshow: function(tip) {\r
-                   var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)\r
-                       ? this.mainItem\r
-                       : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);\r
-\r
-                   if(!item.tabTip) {\r
-                       return false;\r
-                   }\r
-                   tip.body.dom.innerHTML = item.tabTip;\r
-               },\r
-               scope: this\r
-           }\r
-        });\r
-                \r
-        if (!this.itemTpl) {\r
-            var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');\r
-            tt.disableFormats = true;\r
-            tt.compile();\r
-            Ext.ux.GroupTab.prototype.itemTpl = tt;\r
-        }\r
-        \r
-        this.items.each(this.initTab, this);\r
-    },\r
-    \r
-    afterRender: function(){\r
-        Ext.ux.GroupTab.superclass.afterRender.call(this);\r
-        \r
-        if (this.activeTab !== undefined) {\r
-            var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);\r
-            delete this.activeTab;\r
-            this.setActiveTab(item);\r
-        }\r
-    },\r
-    \r
-    // private\r
-    initTab: function(item, index){\r
-        var before = this.strip.dom.childNodes[index];\r
-        var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);\r
-        \r
-        if (item === this.mainItem) {\r
-            item.tabEl = this.groupEl;\r
-            p.cls += ' x-grouptabs-main-item';\r
-        }\r
-        \r
-        var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);\r
-        \r
-        item.tabEl = item.tabEl || el;\r
-                \r
-        item.on('disable', this.onItemDisabled, this);\r
-        item.on('enable', this.onItemEnabled, this);\r
-        item.on('titlechange', this.onItemTitleChanged, this);\r
-        item.on('iconchange', this.onItemIconChanged, this);\r
-        item.on('beforeshow', this.onBeforeShowItem, this);\r
-    },\r
-    \r
-    setMainItem: function(item){\r
-        item = this.getComponent(item);\r
-        if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {\r
-            return;\r
-        }\r
-        \r
-        this.mainItem = item;\r
-    },\r
-    \r
-    getMainItem: function(){\r
-        return this.mainItem || null;\r
-    },\r
-    \r
-    // private\r
-    onBeforeShowItem: function(item){\r
-        if (item != this.activeTab) {\r
-            this.setActiveTab(item);\r
-            return false;\r
-        }\r
-    },\r
-    \r
-    // private\r
-    onAdd: function(gt, item, index){\r
-        if (this.rendered) {\r
-            this.initTab.call(this, item, index);\r
-        }\r
-    },\r
-    \r
-    // private\r
-    onRemove: function(tp, item){\r
-        Ext.destroy(Ext.get(this.getTabEl(item)));\r
-        this.stack.remove(item);\r
-        item.un('disable', this.onItemDisabled, this);\r
-        item.un('enable', this.onItemEnabled, this);\r
-        item.un('titlechange', this.onItemTitleChanged, this);\r
-        item.un('iconchange', this.onItemIconChanged, this);\r
-        item.un('beforeshow', this.onBeforeShowItem, this);\r
-        if (item == this.activeTab) {\r
-            var next = this.stack.next();\r
-            if (next) {\r
-                this.setActiveTab(next);\r
-            }\r
-            else if (this.items.getCount() > 0) {\r
-                this.setActiveTab(0);\r
-            }\r
-            else {\r
-                this.activeTab = null;\r
-            }\r
-        }\r
-    },\r
-    \r
-    // private\r
-    onBeforeAdd: function(item){\r
-        var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);\r
-        if (existing) {\r
-            this.setActiveTab(item);\r
-            return false;\r
-        }\r
-        Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);\r
-        var es = item.elements;\r
-        item.elements = es ? es.replace(',header', '') : es;\r
-        item.border = (item.border === true);\r
-    },\r
-    \r
-    // private\r
-    onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,\r
-    onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,\r
-    \r
-    // private\r
-    onItemTitleChanged: function(item){\r
-        var el = this.getTabEl(item);\r
-        if (el) {\r
-            Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;\r
-        }\r
-    },\r
-    \r
-    //private\r
-    onItemIconChanged: function(item, iconCls, oldCls){\r
-        var el = this.getTabEl(item);\r
-        if (el) {\r
-            Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);\r
-        }\r
-    },\r
-    \r
-    beforeDestroy: function(){\r
-        Ext.TabPanel.prototype.beforeDestroy.call(this);\r
-        this.tooltip.destroy();\r
-    }\r
-});\r
-\r
-Ext.reg('grouptab', Ext.ux.GroupTab);\r
+Ext.ux.GroupTab = Ext.extend(Ext.Container, {
+    mainItem: 0,
+    
+    expanded: true,
+    
+    deferredRender: true,
+    
+    activeTab: null,
+    
+    idDelimiter: '__',
+    
+    headerAsText: false,
+    
+    frame: false,
+    
+    hideBorders: true,
+    
+    initComponent: function(config){
+        Ext.apply(this, config);
+        this.frame = false;
+        
+        Ext.ux.GroupTab.superclass.initComponent.call(this);
+        
+        this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');
+        
+        this.setLayout(new Ext.layout.CardLayout({
+            deferredRender: this.deferredRender
+        }));
+        
+        if (!this.stack) {
+            this.stack = Ext.TabPanel.AccessStack();
+        }
+        
+        this.initItems();
+        
+        this.on('beforerender', function(){
+            this.groupEl = this.ownerCt.getGroupEl(this);
+        }, this);
+        
+        this.on('add', this.onAdd, this, {
+            target: this
+        });
+        this.on('remove', this.onRemove, this, {
+            target: this
+        });
+        
+        if (this.mainItem !== undefined) {
+            var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);
+            delete this.mainItem;
+            this.setMainItem(item);
+        }
+    },
+    
+    /**
+     * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
+     * can return false to cancel the tab change.
+     * @param {String/Panel} tab The id or tab Panel to activate
+     */
+    setActiveTab : function(item){
+        item = this.getComponent(item);
+        if(!item){
+            return false;
+        }
+        if(!this.rendered){
+            this.activeTab = item;
+            return true;
+        }
+        if(this.activeTab != item && this.fireEvent('beforetabchange', this, item, this.activeTab) !== false){
+            if(this.activeTab && this.activeTab != this.mainItem){
+                var oldEl = this.getTabEl(this.activeTab);
+                if(oldEl){
+                    Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
+                }
+            }
+            var el = this.getTabEl(item);
+            Ext.fly(el).addClass('x-grouptabs-strip-active');
+            this.activeTab = item;
+            this.stack.add(item);
+
+            this.layout.setActiveItem(item);
+            if(this.layoutOnTabChange && item.doLayout){
+                item.doLayout();
+            }
+            if(this.scrolling){
+                this.scrollToTab(item, this.animScroll);
+            }
+
+            this.fireEvent('tabchange', this, item);
+            return true;
+        }
+        return false;
+    },
+    
+    getTabEl: function(item){
+        if (item == this.mainItem) {
+            return this.groupEl;
+        }
+        return Ext.TabPanel.prototype.getTabEl.call(this, item);
+    },
+    
+    onRender: function(ct, position){
+        Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);
+        
+        this.strip = Ext.fly(this.groupEl).createChild({
+            tag: 'ul',
+            cls: 'x-grouptabs-sub'
+        });
+
+        this.tooltip = new Ext.ToolTip({
+           target: this.groupEl,
+           delegate: 'a.x-grouptabs-text',
+           trackMouse: true,
+           renderTo: document.body,
+           listeners: {
+               beforeshow: function(tip) {
+                   var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)
+                       ? this.mainItem
+                       : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);
+
+                   if(!item.tabTip) {
+                       return false;
+                   }
+                   tip.body.dom.innerHTML = item.tabTip;
+               },
+               scope: this
+           }
+        });
+                
+        if (!this.itemTpl) {
+            var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');
+            tt.disableFormats = true;
+            tt.compile();
+            Ext.ux.GroupTab.prototype.itemTpl = tt;
+        }
+        
+        this.items.each(this.initTab, this);
+    },
+    
+    afterRender: function(){
+        Ext.ux.GroupTab.superclass.afterRender.call(this);
+        
+        if (this.activeTab !== undefined) {
+            var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);
+            delete this.activeTab;
+            this.setActiveTab(item);
+        }
+    },
+    
+    // private
+    initTab: function(item, index){
+        var before = this.strip.dom.childNodes[index];
+        var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
+        
+        if (item === this.mainItem) {
+            item.tabEl = this.groupEl;
+            p.cls += ' x-grouptabs-main-item';
+        }
+        
+        var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);
+        
+        item.tabEl = item.tabEl || el;
+                
+        item.on('disable', this.onItemDisabled, this);
+        item.on('enable', this.onItemEnabled, this);
+        item.on('titlechange', this.onItemTitleChanged, this);
+        item.on('iconchange', this.onItemIconChanged, this);
+        item.on('beforeshow', this.onBeforeShowItem, this);
+    },
+    
+    setMainItem: function(item){
+        item = this.getComponent(item);
+        if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {
+            return;
+        }
+        
+        this.mainItem = item;
+    },
+    
+    getMainItem: function(){
+        return this.mainItem || null;
+    },
+    
+    // private
+    onBeforeShowItem: function(item){
+        if (item != this.activeTab) {
+            this.setActiveTab(item);
+            return false;
+        }
+    },
+    
+    // private
+    onAdd: function(gt, item, index){
+        if (this.rendered) {
+            this.initTab.call(this, item, index);
+        }
+    },
+    
+    // private
+    onRemove: function(tp, item){
+        Ext.destroy(Ext.get(this.getTabEl(item)));
+        this.stack.remove(item);
+        item.un('disable', this.onItemDisabled, this);
+        item.un('enable', this.onItemEnabled, this);
+        item.un('titlechange', this.onItemTitleChanged, this);
+        item.un('iconchange', this.onItemIconChanged, this);
+        item.un('beforeshow', this.onBeforeShowItem, this);
+        if (item == this.activeTab) {
+            var next = this.stack.next();
+            if (next) {
+                this.setActiveTab(next);
+            }
+            else if (this.items.getCount() > 0) {
+                this.setActiveTab(0);
+            }
+            else {
+                this.activeTab = null;
+            }
+        }
+    },
+    
+    // private
+    onBeforeAdd: function(item){
+        var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
+        if (existing) {
+            this.setActiveTab(item);
+            return false;
+        }
+        Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
+        var es = item.elements;
+        item.elements = es ? es.replace(',header', '') : es;
+        item.border = (item.border === true);
+    },
+    
+    // private
+    onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,
+    onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,
+    
+    // private
+    onItemTitleChanged: function(item){
+        var el = this.getTabEl(item);
+        if (el) {
+            Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;
+        }
+    },
+    
+    //private
+    onItemIconChanged: function(item, iconCls, oldCls){
+        var el = this.getTabEl(item);
+        if (el) {
+            Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);
+        }
+    },
+    
+    beforeDestroy: function(){
+        Ext.TabPanel.prototype.beforeDestroy.call(this);
+        this.tooltip.destroy();
+    }
+});
+
+Ext.reg('grouptab', Ext.ux.GroupTab);