更改焦点ExtJs上的文本字段颜色

Question

I'm trying to change the colour of a textfield when the user put the cursor on it, to be more easy to the user find the textfield.

I see in another post's how to change the colour with the css rules, and i found in the API, the fieldCls and focusCls to change the colours, but it isn't working, i know the problem is on the focus event that isn't fiering,

Definition of the Button:

xtype:'textfield',
focusCls:'red',
fieldCls:'green',
listener: {
    'focus':function(){
        Ext.Msg.Alert('Focus','TextField have focus'); //This don't run
    }
}

CSS rules:

.red {
    background-image: none;
    background-color:#ff0000 !important;
}
.green {
    background-image: none;
    background-color:#00ff00 !important;
}

I made this test's on fiddle: http://jsfiddle.net/FabioJCosta/3ZZcZ/547/

Even when i'm forcing the focus with a button textfield.focus(false, 200); the focus event isn't fiering.

I hope this helps another people.

Thank You

Answer 1

You don't need jQuery if I understand the question.

.green:focus {
    background-image: none;
    background-color:#ff0000 !important;
}
.green {
    background-image: none;
    background-color:#00ff00 !important;
}