This plugin renders Ext.Panel collapsed title bar text, and rotates that text for west and east Panels. Go to the bottom of this post for the download and demo links, and for screenshot goodness.
The collapsed title thread got me thinking about how to do vertical (rotated) text in a cross-browser way.
A quick recap of all the known ways text can be rotated in the browser:
Sadly, none of those methods allow support for older gecko browsers, and none offer support for opera. Because of this, rotated text in the real world is still done with images, because that's the only known cross-browser method.
The solution: SVG
SVG supports rotated text. SVG is supported in Opera 8+, Firefox 2+, Safari 3+ and Chrome. Aside from IE, that's pretty much every browser out there. So, SVG provides a theoretical path to rotated text. The idea to try it had crossed my mind, but I hadn't taken it seriously. When Condor suggested the same thing, I felt obligated to at least try to make it work.
Combining this with SVG feature detection and fallback support for IE using CSS writing-mode, I arrived at a simple cross-browser rotated text example:
var SVGNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(SVGNS, 'svg');
// container is the DOM element to add the rotated text to
var textBlock = document.createElementNS(SVGNS, 'text');
// SVG text nodes use 'fill' instead of 'color'
var text = document.createTextNode('rotated text');
This solution works in Firefox 2+, Opera 8+, Safari 3+, IE 6+ and Chrome.
Plugin code: Ext.ux.PanelCollapsedTitle.js
To use on an Ext.Panel, pass the following in the config object:
The plugin also supports a collapsed title bar icon via the collapsedIconCls property, and patches the setTitle function so you can update the Panel title at run-time.
Licensed under http://www.gnu.org/licenses/lgpl-3.0.txt
- 1.0 (2009-01-10): First version
- 1.1 (2009-01-11): Fixed compatibility with complex layouts