GroupTabPanel enhancements

[Zolcsi]

Hi folks,

I needed some enhancements on the grouptabpanel, and I thought you might like it, so here they are:

First I created a very simple function:



collapseGroup: function(groupEl){
if(groupEl.isXType) {
groupEl = this.getGroupEl(groupEl);
}
Ext.fly(groupEl).removeClass('x-grouptabs-expanded');
this.syncTabJoint();
},

And then I needed to close the groups once "inactivated", so there is always just one group open. I made a new config option for that, called: allowMultipleGroupsOpen which has to be set to false

This is a new method again:


closeGroupIfInactive: function(currentItem){
if(currentItem.id != this.activeGroup.id)
{
this.collapseGroup(currentItem);
}
},

And some changes in the setActiveGroup method:




setActiveGroup : function(group) {
group = this.getComponent(group);
if(!group || this.fireEvent('beforegroupchange', this, group, this.activeGroup) === false){
return;
}
if(!this.rendered){
this.activeGroup = group;
return;
}
if(this.activeGroup != group){
if(this.activeGroup){
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);
Ext.fly(groupEl).addClass('x-grouptabs-strip-active');

this.activeGroup = group;
this.stack.add(group);

this.layout.setActiveItem(group);
this.syncTabJoint(groupEl);

group.fireEvent('activate', group);
this.fireEvent('groupchange', this, group);

if(!Ext.isEmpty(this.allowMultipleGroupsOpen) && !this.allowMultipleGroupsOpen)
{
this.items.each(this.closeGroupIfInactive, this);
}
}
},

I hope you like this enhancements :)

Cheers

[franck34]

Thanks for this feature !

From your code, here is the all override :


Ext.override(Ext.ux.GroupTabPanel, {

collapseGroup: function(groupEl) {
if (groupEl.isXType) {
groupEl = this.getGroupEl(groupEl);
}
Ext.fly(groupEl).removeClass('x-grouptabs-expanded');
this.syncTabJoint();
},

closeGroupIfInactive: function(currentItem) {
if (currentItem.id != this.activeGroup.id) {
this.collapseGroup(currentItem);
}
},

setActiveGroup : function(group) {
group = this.getComponent(group);
if (!group || this.fireEvent('beforegroupchange', this, group, this.activeGroup) === false) {
return;
}
if (!this.rendered) {
this.activeGroup = group;
return;
}
if (this.activeGroup != group) {
if (this.activeGroup) {
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);
Ext.fly(groupEl).addClass('x-grouptabs-strip-active');

this.activeGroup = group;
this.stack.add(group);

this.layout.setActiveItem(group);
this.syncTabJoint(groupEl);

group.fireEvent('activate', group);
this.fireEvent('groupchange', this, group);

if (!Ext.isEmpty(this.allowMultipleGroupsOpen) && !this.allowMultipleGroupsOpen) {
this.items.each(this.closeGroupIfInactive, this);
}
}
}
});


Should be great if this code can be merge to the trunk ;)

But wait ... i'm debugging a little problem on my side right now.

3 tabs: click on the last, click on the second, click on the last again: nothing append

[Zolcsi]

Thanks for summarizing it, I think I will use it, so I can update the original grouptabpanel without issues.

[franck34]

Fixed !!

Here is the override for extjs 3.1.1. The previous bug i take in my head was because your code was from a version < 3.1.1 i think.



Ext.override(Ext.ux.GroupTabPanel, {

closeGroupIfInactive: function(currentItem) {
if (currentItem.id != this.activeGroup.id) {
this.collapseGroup(currentItem);
}
},

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);

if(!Ext.isEmpty(this.allowMultipleGroupsOpen) && !this.allowMultipleGroupsOpen) {
this.items.each(this.closeGroupIfInactive, this);
}
return true;
}
return false;
}
});