Styling tab title?

[jsakalos]

Is it possible to assign a css class to tab titles in runtime?

I wanna to achieve the following:

I have several on-activate loaded tabs in center region of the BorderLayout. I cannot display normal loading indicator as these tabs contain created but unrendered grids in grid panels so I thought to put a background image with loading gif to the title while tab is loading.

[tryanDLS]

There are no API methods to do it, but if you look at the TabPanel there are couple properties like stripBody, stripEl that you can probably use at runtime to add a class.

[jsakalos]

Thanks Tim,

I'll look into it.

[jsakalos]

Finally I've solved it another way. I get active tab body element and mask it. For anybody interested this is part of activate event handler:



var bodyEl = layout.getRegion('center').getTabs().getActiveTab().bodyEl;
bodyEl.fitToParent();
bodyEl.mask(Ext.LoadMask.prototype.msg, Ext.LoadMask.prototype.msgCls);
You have to unmask once the content of tab is ready, of course.

[JorisA]

Dont know if this still is what you mean, but to style the title:


tabPanel = new Ext.TabPanel('example-container');
var tab = tabPanel.addTab('some-tab', "Hi there");
tab.setTooltip("Hello");
tab.setWidth(75);
tab.inner.addClass('tab-title-icon');

It would be nice to have addClass for the title added to the api (or giving the strip id's as well).

[jsakalos]

JorisA,

I have made some tests manually adding styles (with my background loading gif) to tabs with firebug but it hadn't looked good. Finally I've put the loading indicator in the grid toolbars as you can see in "Just look !" thread in Examples forum.

However, there could be another situation where the tabs styling is really necessary so thank you for posting.