X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/b37ceabb82336ee82757cd32efe353cfab8ec267..f5240829880f87e0cf581c6a296e436fdef0ef80:/examples/docs/source/GroupTab.html?ds=sidebyside diff --git a/examples/docs/source/GroupTab.html b/examples/docs/source/GroupTab.html new file mode 100644 index 00000000..15092205 --- /dev/null +++ b/examples/docs/source/GroupTab.html @@ -0,0 +1,277 @@ + + + + The source code + + + + +
/*!
+ * Ext JS Library 3.3.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+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('
  • ', '{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); +
    + + \ No newline at end of file