Idea for collapsed title on west/east panels

[mankz]

Lots of people have requested a collapsed vertical title for east/west panels in a border layout. Since only IE supports this natively it's either nothing or a background image. I wonder if something like this would work: render each character of the title as a span. It might turn out to be impossible to get it to look 100%...


Ext.each(this.title.split(''), function(character) {
this.collapsedEl.createChild({
tag : 'span',
style: {
color:'#15428b',
display : 'block',
height : '10px',
font: 'bold 11px tahoma,arial,verdana,sans-serif',
'margin-left' : '6px',
'margin-right' : '6px',
'margin-top' : character === ' ' ? '5px' : '1px'
},
html : character
});
}, this);

It looks a little weird but maybe that could be fixed by some more clever CSS magic...?

Complete code:


Ext.override(Ext.layout.BorderLayout.Region, {
getCollapsedEl : function(){
if(!this.collapsedEl){
if(!this.toolTemplate){
var tt = new Ext.Template(
'<div class="x-tool x-tool-{id}"> </div>'
);
tt.disableFormats = true;
tt.compile();
Ext.layout.BorderLayout.Region.prototype.toolTemplate = tt;
}
this.collapsedEl = this.targetEl.createChild({
cls: "x-layout-collapsed x-layout-collapsed-"+this.position,
id: this.panel.id + '-xcollapsed'
});
this.collapsedEl.enableDisplayMode('block');

if(this.collapseMode == 'mini'){
this.collapsedEl.addClass('x-layout-cmini-'+this.position);
this.miniCollapsedEl = this.collapsedEl.createChild({
cls: "x-layout-mini x-layout-mini-"+this.position, html: " "
});
this.miniCollapsedEl.addClassOnOver('x-layout-mini-over');
this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
this.collapsedEl.on('click', this.onExpandClick, this, {stopEvent:true});
}else {
if(this.collapsible !== false && !this.hideCollapseTool) {
var t = this.toolTemplate.append(
this.collapsedEl.dom,
{id:'expand-'+this.position}, true);
t.addClassOnOver('x-tool-expand-'+this.position+'-over');
t.on('click', this.onExpandClick, this, {stopEvent:true});
}
if(this.floatable !== false || this.titleCollapse){
this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
this.collapsedEl.on("click", this[this.floatable ? 'collapseClick' : 'onExpandClick'], this);
}

Ext.each(this.title.split(''), function(character) {
this.collapsedEl.createChild({
tag : 'span',
style: {
color:'#15428b',
display : 'block',
height : '10px',
font: 'bold 11px tahoma,arial,verdana,sans-serif',
'margin-left' : '6px',
'margin-right' : '6px',
'margin-top' : character === ' ' ? '5px' : '1px'
},
html : character
});
}, this);
}
}
return this.collapsedEl;
}
});

[evant]

Definitely not impossible, but as you said, looks fairly funky on non IE browsers.

[mankz]

With a little help from TextMetrics it shouldn't be too hard right? I might take a stab at it a rainy day :)

[deanna]

For browsers that support it wouldn't canvas do the trick?

[mankz]

I had the same thought, I think you'd get the same horizontal-alignment issue there too though (as seen in the attached image). So you'd have to use some form text measuring to get it 100% right.