Blog Archive

ExtJs 4 force UpperCase Text input field

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. Here is an example
//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
  },
  {
     .....
  },
  {
   .....
  },
  {
   .....
   }
 ]

2 comments :

  1. in this site have other example http://thalesnet.wordpress.com/2011/11/10/uppercase-extjs-4-0/

    ReplyDelete