PDA

View Full Version : TabPanel, optional tabTitle



MaxT
14 Feb 2008, 7:46 AM
I don't know if this has been requested before, but how about adding a separate optional title for tab panels.

In some situations, particularly when generating dynamic content, the title of the enclosed panel can be far too long to be duplicated in the tab itself. It would be nice to be able to add an alternate title for the tab. While just truncating the title is one method, the readability isn't as good as providing an abbreviated title plus a tabTip for the full title.

Currently I'm using this override for adding an optional tabTitle.

Any comments, or better ways to achieve this?

Thanks,

Max




Ext.override(Ext.TabPanel,{

initTab : function(item, index){
var before = this.strip.dom.childNodes[index];
var cls = item.closable ? 'x-tab-strip-closable' : '';
if(item.disabled){
cls += ' x-item-disabled';
}
if(item.iconCls){
cls += ' x-tab-with-icon';
}
var p = {
id: this.id + this.idDelimiter + item.getItemId(),
//START CHANGE
text: item.tabTitle ? item.tabTitle : item.title,
//END CHANGE
cls: cls,
iconCls: item.iconCls || ''
};
var el = before ?
this.itemTpl.insertBefore(before, p) :
this.itemTpl.append(this.strip, p);

Ext.fly(el).addClassOnOver('x-tab-strip-over');

if(item.tabTip){
Ext.fly(el).child('span.x-tab-strip-text', true).qtip = item.tabTip;
}
item.on('disable', this.onItemDisabled, this);
item.on('enable', this.onItemEnabled, this);
item.on('titlechange', this.onItemTitleChanged, this);
item.on('beforeshow', this.onBeforeShowItem, this);
}
});

MaxT
18 Feb 2008, 8:42 AM
On further testing this doesn't work very well. A "normal" tab panel doesn't support a title panel as well as a tab-title. I was getting a header in my tab panel for the wrong reasons. i.e. I had rendered the panel before adding it to the TabPanel. I wondered why the header title disappeared when I didn't pre-render the panel before adding it to the TabPanel.

I guess for the moment I can add an extra dummy panel to the TabPanel so that I can have a header title inside the tab, regardless of whether the contained panel is pre-rendered or not.

Max