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 || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){ return; } if(!this.rendered){ this.activeTab = item; return; } if(this.activeTab != item){ if(this.activeTab && this.activeTab != this.mainItem){ var oldEl = this.getTabEl(this.activeTab); if(oldEl){ Ext.fly(oldEl).removeClass('x-grouptabs-strip-active'); } this.activeTab.fireEvent('deactivate', this.activeTab); } 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); } item.fireEvent('activate', item); this.fireEvent('tabchange', this, item); } }, 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('
  • ', '{text}', '
  • '); 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);