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
  },
  {
     .....
  },
  {
   .....
  },
  {
   .....
   }
 ]

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.