How to display values in uppercase in ExtJs textfield without showing user letter transition from lower to uppercase?

Question

We are creating an application using ExtJS 4 which has a requirement that entry in a form textfield should always be in UPPERCASE.

For this, I found that I can call a function on change event and convert the current value to uppercase and set it back to the field in following way:

change: function(field, newValue){
   field.setValue(newValue.toUpperCase());
} 

What this does is that if a user enters a letter in lowercase, then it converts it to uppercase and puts it back in the field. During this, there is a slight transition displayed to the user from lower to upper case. That is, the user is able to see the letter in lower case and after a millisecond may be, the letter becomes uppercase.

The question is: Is there a way to avoid this 'transition/transformation' from lower to upper case and show letters in uppercase directly to the user as soon as he types something?

I tried using - style=text-transform:uppercase - but no luck.

Any help would be really appreciated.

Thanks in advance.

Answer 1

I tried using - style=text-transform:uppercase - but no luck.

You should have used fieldStyle instead. Here is demo.
Cheers!