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);
}
});
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);
}
});