1. #1
    Sencha User
    Join Date
    Dec 2007
    Location
    Budapest, Hungary
    Posts
    83
    Vote Rating
    1
    Zolcsi is on a distinguished road

      0  

    Default GroupTabPanel enhancements

    GroupTabPanel enhancements


    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:

    Code:
        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:
    Code:
    	
    	closeGroupIfInactive: function(currentItem){
    		if(currentItem.id != this.activeGroup.id)
    		{
    			this.collapseGroup(currentItem);
    		}
    	},
    And some changes in the setActiveGroup method:


    Code:
        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

  2. #2
    Ext User franck34's Avatar
    Join Date
    Dec 2007
    Location
    France, Montpellier
    Posts
    148
    Vote Rating
    1
    franck34 is on a distinguished road

      0  

    Default


    Thanks for this feature !

    From your code, here is the all override :

    Code:
    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
    Last edited by franck34; 4 Mar 2010 at 4:45 AM. Reason: remove some console.log
    Regards, Franck

    http://jabext.innovacode.com/ ExtJS Jabber Client
    http://innovacode.com/extjs/Ext.ux.IconAlive/ icon manager for desktop
    http://trac.innovacode.com/wiki/ExtJS work around extjs

  3. #3
    Sencha User
    Join Date
    Dec 2007
    Location
    Budapest, Hungary
    Posts
    83
    Vote Rating
    1
    Zolcsi is on a distinguished road

      0  

    Default


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

  4. #4
    Ext User franck34's Avatar
    Join Date
    Dec 2007
    Location
    France, Montpellier
    Posts
    148
    Vote Rating
    1
    franck34 is on a distinguished road

      0  

    Default


    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.


    Code:
    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;
        }
    });
    Regards, Franck

    http://jabext.innovacode.com/ ExtJS Jabber Client
    http://innovacode.com/extjs/Ext.ux.IconAlive/ icon manager for desktop
    http://trac.innovacode.com/wiki/ExtJS work around extjs

Thread Participants: 1