Add Icons to Tabs

[justheatingup]

Didn't know if this was on for the current release or not. If there is a current way to handle it, please let me know. thnx

[tryanDLS]

There are several other threads related to injecting additional HTML into tab. I would suggest searching thru the Help forum.

[JeffHowden]

Could be easily added:


Ext.TabPanelItem.override({
setIcon : function(icon){
if(this.icon && this.inner.hasClass(this.icon))
this.inner.removeClass(this.icon);
this.icon = icon;
if(!this.inner.hasClass('x-layout-tab-icon'))
this.inner.addClass('x-layout-tab-icon');
this.inner.addClass(icon);
}
});

Then, some CSS for ext-all.css:


.x-tabs-strip .x-tabs-inner.x-layout-tab-icon {
background-image: none;
background-position: 10px 3px;
background-repeat: no-repeat;
padding-left: 34px;
}

Then, for each icon you specify, you'll need some custom CSS:


.x-tabs-strip .x-tabs-inner.x-layout-tab-icon.contacts { /* icon = contacts */
background-image: url(/images/containers/yui-ext/icons/16x16/contacts.png);
}

[sandyca88]

With the new image next to the tab, how can I set the "Alt" description for this added image icon? At this time, it default to the tab name but the icon is showing something different so I have to change it. Please advice. Thanks.

[sandyca88]

iconid=document.getElementById('ext-gen263');
iconid.setAttribute("title", "New");

I use above code. It works in FF but not IE.

[mjlecomte]

did you check examples at www.extjs.eu?

[sandyca88]

Thanks for the response. It's a great site. Maybe I miss it, but I didn't see the code that apply to the question here?

[mjlecomte]

there's an example of icons in tabs there.

[sandyca88]

The id on the icon is dynamically generated so I can't use the following code to update the image alt description.

//iconid=document.getElementById('ext-gen263');
//iconid.setAttribute("alt", "New");

I also tried to use setTitle method in the TabPanel. It also doesn't work.

myTab.setTitle('New');

or

myTab.titlechange('New')

Could anyone post a code snippet here for this solution? It should be a very simple issue but the dynamic id on the image file makes it quite difficult with the framework. Please advice.

Thank you

[mjlecomte]

See here:
http://extjs.com/forum/showthread.php?p=243190#post243190

You might want to post a thread in premium forum with a link back here or to thread above if this is something urgent for you.

[mystix]

See here:
http://extjs.com/forum/showthread.php?p=243190#post243190

You might want to post a thread in premium forum with a link back here or to thread above if this is something urgent for you.

i replied in that thread with a link to this bug report:
http://extjs.com/forum/showthread.php?p=193156#post193156

HTH