X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/b37ceabb82336ee82757cd32efe353cfab8ec267..f5240829880f87e0cf581c6a296e436fdef0ef80:/examples/docs/source/GroupTabPanel.html?ds=sidebyside diff --git a/examples/docs/source/GroupTabPanel.html b/examples/docs/source/GroupTabPanel.html new file mode 100644 index 00000000..e3081985 --- /dev/null +++ b/examples/docs/source/GroupTabPanel.html @@ -0,0 +1,315 @@ + + + + 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.ns('Ext.ux');
+
+Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
+    tabPosition: 'left',
+
+    alternateColor: false,
+
+    alternateCls: 'x-grouptabs-panel-alt',
+
+    defaultType: 'grouptab',
+
+    deferredRender: false,
+
+    activeGroup : null,
+
+    initComponent: function(){
+        Ext.ux.GroupTabPanel.superclass.initComponent.call(this);
+        
+        this.addEvents(
+            'beforegroupchange',
+            'groupchange'
+        );
+        this.elements = 'body,header';
+        this.stripTarget = 'header';
+
+        this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';
+
+        this.addClass('x-grouptabs-panel');
+
+        if (this.tabStyle && this.tabStyle != '') {
+            this.addClass('x-grouptabs-panel-' + this.tabStyle);
+        }
+
+        if (this.alternateColor) {
+            this.addClass(this.alternateCls);
+        }
+
+        this.on('beforeadd', function(gtp, item, index){
+            this.initGroup(item, index);
+        });
+        this.items.each(function(item){
+            item.on('tabchange',function(item){
+                this.fireEvent('tabchange', this, item.activeTab);
+            }, this);
+        },this);
+    },
+
+    initEvents : function() {
+        this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
+    },
+
+    onRender: function(ct, position){
+        Ext.TabPanel.superclass.onRender.call(this, ct, position);
+        if(this.plain){
+            var pos = this.tabPosition == 'top' ? 'header' : 'footer';
+            this[pos].addClass('x-tab-panel-'+pos+'-plain');
+        }
+
+        var st = this[this.stripTarget];
+
+        this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{
+            tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});
+
+        var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
+        this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
+
+        this.header.addClass('x-grouptabs-panel-header');
+        this.bwrap.addClass('x-grouptabs-bwrap');
+        this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');
+
+        if (!this.groupTpl) {
+            var tt = new Ext.Template(
+                '
  • ', + '', + '', + '{text}', + '
  • ' + ); + tt.disableFormats = true; + tt.compile(); + Ext.ux.GroupTabPanel.prototype.groupTpl = tt; + } + this.items.each(this.initGroup, this); + }, + + afterRender: function(){ + Ext.ux.GroupTabPanel.superclass.afterRender.call(this); + + this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({ + cls: 'x-tab-joint' + }); + + this.addClass('x-tab-panel-' + this.tabPosition); + this.header.setWidth(this.tabWidth); + + if (this.activeGroup !== undefined) { + var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup); + delete this.activeGroup; + this.setActiveGroup(group); + group.setActiveTab(group.getMainItem()); + } + }, + + getGroupEl : Ext.TabPanel.prototype.getTabEl, + + // private + findTargets: function(e){ + var item = null, + itemEl = e.getTarget('li', this.strip); + if (itemEl) { + item = this.findById(itemEl.id.split(this.idDelimiter)[1]); + if (item.disabled) { + return { + expand: null, + item: null, + el: null + }; + } + } + return { + expand: e.getTarget('.x-grouptabs-expand', this.strip), + isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip), + item: item, + el: itemEl + }; + }, + + // private + onStripMouseDown: function(e){ + if (e.button != 0) { + return; + } + e.preventDefault(); + var t = this.findTargets(e); + if (t.expand) { + this.toggleGroup(t.el); + } + else if (t.item) { + if(t.isGroup) { + t.item.setActiveTab(t.item.getMainItem()); + } + else { + t.item.ownerCt.setActiveTab(t.item); + } + } + }, + + expandGroup: function(groupEl){ + if(groupEl.isXType) { + groupEl = this.getGroupEl(groupEl); + } + Ext.fly(groupEl).addClass('x-grouptabs-expanded'); + this.syncTabJoint(); + }, + + toggleGroup: function(groupEl){ + if(groupEl.isXType) { + groupEl = this.getGroupEl(groupEl); + } + Ext.fly(groupEl).toggleClass('x-grouptabs-expanded'); + this.syncTabJoint(); + }, + + collapseGroup: function(groupEl){ + if(groupEl.isXType) { + groupEl = this.getGroupEl(groupEl); + } + Ext.fly(groupEl).removeClass('x-grouptabs-expanded'); + this.syncTabJoint(); + }, + + syncTabJoint: function(groupEl){ + if (!this.tabJoint) { + return; + } + + groupEl = groupEl || this.getGroupEl(this.activeGroup); + if(groupEl) { + this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2); + + var y = Ext.isGecko2 ? 0 : 1; + if (this.tabPosition == 'left'){ + this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]); + } + else { + this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]); + } + } + else { + this.tabJoint.hide(); + } + }, + + getActiveTab : function() { + if(!this.activeGroup) return null; + return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null; + }, + + onResize: function(){ + Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments); + this.syncTabJoint(); + }, + + createCorner: function(el, pos){ + return Ext.fly(el).createChild({ + cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos + }); + }, + + initGroup: function(group, index){ + var before = this.strip.dom.childNodes[index], + p = this.getTemplateArgs(group); + if (index === 0) { + p.cls += ' x-tab-first'; + } + p.cls += ' x-grouptabs-main'; + p.text = group.getMainItem().title; + + var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p), + tl = this.createCorner(el, 'top-' + this.tabPosition), + bl = this.createCorner(el, 'bottom-' + this.tabPosition); + + group.tabEl = el; + if (group.expanded) { + this.expandGroup(el); + } + + if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){ + bl.setLeft('-10px'); + bl.setBottom('-5px'); + tl.setLeft('-10px'); + tl.setTop('-5px'); + } + + this.mon(group, { + scope: this, + changemainitem: this.onGroupChangeMainItem, + beforetabchange: this.onGroupBeforeTabChange + }); + }, + + setActiveGroup : function(group) { + group = this.getComponent(group); + if(!group){ + return false; + } + if(!this.rendered){ + this.activeGroup = group; + return true; + } + if(this.activeGroup != group && this.fireEvent('beforegroupchange', this, group, this.activeGroup) !== false){ + if(this.activeGroup){ + this.activeGroup.activeTab = null; + var oldEl = this.getGroupEl(this.activeGroup); + if(oldEl){ + Ext.fly(oldEl).removeClass('x-grouptabs-strip-active'); + } + } + + var groupEl = this.getGroupEl(group); + Ext.fly(groupEl).addClass('x-grouptabs-strip-active'); + + this.activeGroup = group; + this.stack.add(group); + + this.layout.setActiveItem(group); + this.syncTabJoint(groupEl); + + this.fireEvent('groupchange', this, group); + return true; + } + return false; + }, + + onGroupBeforeTabChange: function(group, newTab, oldTab){ + if(group !== this.activeGroup || newTab !== oldTab) { + this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active'); + } + this.expandGroup(this.getGroupEl(group)); + if(group !== this.activeGroup) { + return this.setActiveGroup(group); + } + }, + + getFrameHeight: function(){ + var h = this.el.getFrameWidth('tb'); + h += (this.tbar ? this.tbar.getHeight() : 0) + + (this.bbar ? this.bbar.getHeight() : 0); + + return h; + }, + + adjustBodyWidth: function(w){ + return w - this.tabWidth; + } +}); + +Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel); +
    + + \ No newline at end of file