Text Sprite styling - css

Question

Is there some way to define a text sprite with some more style options then just size and font as shown in the example?
{
type: "text",
text: "Hello, Sprite!",
fill: "green",
font: "18px monospace"
}
Specifically, I want to make it bold or underlined.
I tried a style config like this:
style: {
'text-decoration': 'underline'
}
I also tried setting it in the font config like this:
font: "underline 18px monospace"
Neither worked.
This sentence from the Ext.draw.Sprite#font config in the docs sounded promising but it is pretty cryptic:
Uses the same syntax as the CSS font parameter
I've been googling around for the CSS font parameter and haven't found much of use. Maybe if someone knows what that means they can shed some light on this.

Answer 1

The font css attribute will let you specify bold and italics, but underline is set using the text-decoration attribute. You'll need to use a style config:
{
type: "text",
text: "Hello, Sprite!",
fill: "green",
font: "bold 18px monospace",
style: {
textDecoration: "underline"
}
}
Working demo: http://jsfiddle.net/gilly3/WSQv9/.
Tested in Chrome and IE9. Firefox doesn't yet support underline in SVG.
For reference, here is the font parameter definition:
MSDN
MDN

Answer 2

I've never used extjs, but it looks like SVG to me. Unfortunately Firefox doesn't support text-decoration attribute on svg elements, so perhaps you are testing in Firefox but in Chrome it might be displaying fine with your style attribute.
The workaround for this would be drawing the underline manually with a line element. It is not difficult with javascript but I would have no idea of how to accomplish this the extjs way.