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.

Answer 3

You can do it with a plugin too.

{
    xtype: 'textfield',
    plugins: ['uppertextfield']
}

Using this as the plugin in ExtJS 4.2.1

Ext.define('App.plugin.UpperTextField', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.uppertextfield',

    init: function (cmp) {
        Ext.apply(cmp, {
            fieldStyle: (cmp.fieldStyle ? cmp.fieldStyle + ';' : '') + 'text-transform:uppercase',
            getValue: function() {
                var val = cmp.__proto__.getValue.apply(cmp, arguments);
                return val && val.toUpperCase ? val.toUpperCase() : val;
            }
        });
    }
});

Inspired by: https://www.sencha.com/forum/showthread.php?94599-Uppercase-TextField-plugin&p=522068&viewfull=1#post522068

PS: I had to call getValue on the prototype. If I would have called getValue on the cmp it would recursively continue to do that and never exit. I'm open to suggestions on how to change the component's getValue method through the plugin.

Answer 4

It Works for ExtJS 4.2

If you want only uppercase input for your text field then extend the base text field to change the field style to uppercase and also attach a listener to update the raw value on any text change to uppercase.

//define a new custom text field

Ext.define('IN.view.item.UpperCaseTextField', {
    extend: 'Ext.form.field.Text',
    alias : 'widget.myUpperCaseTextField',
    fieldStyle: {
        textTransform: "uppercase"
    },
    initComponent: function() {
        this.callParent(arguments);
    },
    listeners: {
        change: function (obj, newValue) {
            console.log(newValue);
            obj.setRawValue(newValue.toUpperCase());
        }
     }
});  

//use the newly created custom text field in your view definition using the alias

xtype: 'form',
 items: [
  {
   xtype: 'myUpperCaseTextField',
   itemId: 'itemNumber',
   name : 'item',
   allowBlank: false,
   msgTarget: 'side',
   fieldLabel: 'Item Number',
   size: 11,
   maxLength: 10
  },


 ]