change color of xtype text in extjs4.1

Question

I need to change the color of the text below. Everything else in the style field works except for the text color. Can someone tell me what I am doing wrong here?

{
                            xtype: 'text',

                            text: "Logged in as:",
                            textAlign:'left',
                            style : "color:#3E546B;font-style:italic;font-family: tahoma, arial, verdana, sans-serif;font-size: 11px;",
                            width: 140,
                            handler: function() {
                                document.location.href="";
                            }
                        },

EDIT. I am not using a form panel, i am using xtype:text inside a container.

http://jsfiddle.net/nCkZN/4/ (this still uses form panel. But this is to show the text color does not change)

Answer 1

use fieldStyle instead of style

demo

---

Update

I confused 'text' and 'textfield'.

Now I've got it. The only way to change font style of Ext.draw.Text is to configure it with styleSelector (which has to refer to a valid css rule) like it is done in this demo.

Answer 2

Use The Fill in the Style As below use the type as text (Sprite) instead of using the Xtype as text

Ext.create('Ext.draw.Component', {
    renderTo: Ext.getBody(),
    width: 200,
    height: 200,
    items: [{
        type: "text",
        text: "Hello, Sprite!",
        fill: "green",
        font: "18px monospace"
    }]
});