X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..92c2b89db26be16707f4a805d3303ab2531006e1:/examples/ux/GroupTabPanel.js?ds=sidebyside

diff --git a/examples/ux/GroupTabPanel.js b/examples/ux/GroupTabPanel.js
index a4e074e5..57de9361 100644
--- a/examples/ux/GroupTabPanel.js
+++ b/examples/ux/GroupTabPanel.js
@@ -1,6 +1,6 @@
 /*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.1.1
+ * Copyright(c) 2006-2010 Ext JS, LLC
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
@@ -52,7 +52,6 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
         
     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');
@@ -70,7 +69,7 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
 		this.bwrap.addClass('x-grouptabs-bwrap');
         this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');
 
-        if (!this.itemTpl) {
+        if (!this.groupTpl) {
             var tt = new Ext.Template(
                 '<li class="{cls}" id="{id}">', 
                 '<a class="x-grouptabs-expand" onclick="return false;"></a>', 
@@ -80,9 +79,8 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
             );
             tt.disableFormats = true;
             tt.compile();
-            Ext.ux.GroupTabPanel.prototype.itemTpl = tt;
+            Ext.ux.GroupTabPanel.prototype.groupTpl = tt;
         }
-
         this.items.each(this.initGroup, this);
     },
     
@@ -108,8 +106,8 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
         
     // private
     findTargets: function(e){
-        var item = null;
-        var itemEl = e.getTarget('li', this.strip);
+        var item = null,
+            itemEl = e.getTarget('li', this.strip);
         if (itemEl) {
             item = this.findById(itemEl.id.split(this.idDelimiter)[1]);
             if (item.disabled) {
@@ -153,6 +151,7 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
             groupEl = this.getGroupEl(groupEl);
         }
         Ext.fly(groupEl).addClass('x-grouptabs-expanded');
+		this.syncTabJoint();
     },
     
     toggleGroup: function(groupEl){
@@ -162,7 +161,15 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
         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;
@@ -202,19 +209,19 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
     },
     
     initGroup: function(group, index){
-        var before = this.strip.dom.childNodes[index];        
-        var p = this.getTemplateArgs(group);
+        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.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);
-        
-        var tl = this.createCorner(el, 'top-' + this.tabPosition);
-        var bl = this.createCorner(el, 'bottom-' + this.tabPosition);
+        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);
         }
@@ -226,26 +233,29 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
             tl.setTop('-5px');
         }
 
-        this.mon(group, 'changemainitem', this.onGroupChangeMainItem, this);
-        this.mon(group, 'beforetabchange', this.onGroupBeforeTabChange, this);
+        this.mon(group, {
+            scope: this,
+            changemainitem: this.onGroupChangeMainItem,
+            beforetabchange: this.onGroupBeforeTabChange
+        });
     },
     
     setActiveGroup : function(group) {
         group = this.getComponent(group);
-        if(!group || this.fireEvent('beforegroupchange', this, group, this.activeGroup) === false){
-            return;
+        if(!group){
+            return false;
         }
         if(!this.rendered){
             this.activeGroup = group;
-            return;
+            return true;
         }
-        if(this.activeGroup != group){
+        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');
                 }
-                this.activeGroup.fireEvent('deactivate', this.activeTab);
             }
 
             var groupEl = this.getGroupEl(group);
@@ -257,18 +267,20 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
             this.layout.setActiveItem(group);
             this.syncTabJoint(groupEl);
 
-            group.fireEvent('activate', group);
             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));
-        this.setActiveGroup(group);
+        if(group !== this.activeGroup) {
+            return this.setActiveGroup(group);
+        }        
     },
     
     getFrameHeight: function(){