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!

Answer 2

The given answer works only for DISPLAYING the text in uppercase, but the value remains the same. I've extended the textfield to override the getValue() method to return the value in uppercase, not only for displaying, with an optional config flag:

Ext.define('Dev.ux.UpperTextField', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.uppertextfield',

    //configuration
    config: {
        uppercaseValue: true //defaults to true
    },

    constructor: function (config) {
        this.initConfig(config);
        this.callParent([config]);
    },

    initComponent: function () {
        var me = this;
        Ext.apply(me, {
            fieldStyle: 'text-transform:uppercase',
        });

        me.callParent();
    },

    //overriden function
    getValue: function () {
        var val = this.callParent();
        return this.getUppercaseValue() ? val.toUpperCase() : val;
    }
});

Then I can easily add several textfields to a form:

{
     xtype: 'uppertextfield',
     uppercaseValue: false, //custom cfg available (default is true)
     name: 'Descricao',
     fieldLabel: 'Nome da Cidade',
     allowBlank: false,
     enforceMaxLength: true,
     maxLength: 80
},

Works in EXT 4.2.1.