RSS

ExtJS: GroupTabs hide expand/collapse icon on items with no child elements

04 Feb

By default in ExtJS (version 3.0.3) GroupTabs shows an expand/collapse icon even if group doesn’t have any subitems. Like on this screenshot:

grouptabs

If you want to change this behavior and hide an icon you will have to make a change or override onRender method of GroupTabPanel (GroupTabPanel.js).

This is a piece of modified onRender method:


/*if (!this.groupTpl) { */
      	var tt;
       	for (i = 0; i < this.items.length; i++)
       	{
       		if (this.items.items[i].items.length < 2)
       		{
       			tt = new Ext.Template(
      				'<li class="{cls}" id="{id}">',
       				'<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',
       				'<span>{text}</span></a>',
       				'</li>'
       			);
       		}
       		else
       		{
       			tt = new Ext.Template(
       				'<li class="{cls}" id="{id}">',
       				'<a class="x-grouptabs-expand" onclick="return false;"></a>',
       				'<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',
       				'<span>{text}</span></a>',
       				'</li>'
       			);
       		} 
       		tt.disableFormats = true;
           	tt.compile();
            	Ext.ux.GroupTabPanel.prototype.groupTpl = tt;

            	this.initGroup( this.items.items[i], i);
       	}
        	
/*
        var tt = new Ext.Template(
                '<li class="{cls}" id="{id}">', 
                '<a class="x-grouptabs-expand" onclick="return false;"></a>', 
                '<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',
                '<span>{text}</span></a>', 
                '</li>'
        );
        tt.disableFormats = true;
        tt.compile();
        Ext.ux.GroupTabPanel.prototype.groupTpl = tt;
}
this.items.each(this.initGroup, this);
*/

As a result you should get something like this:

grouptabs

Advertisements
 
1 Comment

Posted by on February 4, 2011 in Sencha

 

Tags: , ,

One response to “ExtJS: GroupTabs hide expand/collapse icon on items with no child elements

  1. Yok

    February 18, 2011 at 8:47 am

    Thanks it helps me in my big problem in groubtabs..keep up the work!

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: