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.

/ (this still uses form panel. But this is to show the text color does not change)

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/nCkZN/4/ (this still uses form panel. But this is to show the text color does not change)

• javascript
• extjs
• extjs4.1
• xtype

2 Answers 2

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.

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