ExtJS show message if Caps Lock is on

Question

I want to add a message if user turns on the caps lock while entering password. This is what I've tried so far.

 {
     xtype:'textfield',
     itemId: 'field_password_login',
     fieldLabel: 'Password',
     inputType: 'password',
     allowBlank: false,
     listeners:
     {
         keypress: function(tf, e)
         {
             if (e.getKey() != 13 && e.getKey() != 10 && e.getKey() != 127)
             {
                 if ((!e.shiftKey && (e.getKey() >= 65 && e.getKey() <= 90)) || ((e.getKey() >= 97 && e.getKey() <= 122) && e.shiftKey))
                 {
                     Ext.getCmp("app_idCAPSIndicator").setText("CAPS LOCK is ON");
                     Ext.getDom("app_idCAPSIndicator").style.color = "navy";

                 }
                 else
                 {
                     Ext.getCmp("app_idCAPSIndicator").setText("");
                 }
             }
             if (e.getKey() == 13)
             {
                 Ext.Msg.alert("Enter Pressed");
             }
         }
     }
 },
 {
     xtype: 'label',
     fieldLabel: '',
     labelWidth: 90,
     labelAlign: 'left',
     labelSeperator: '',
     id: 'app_idCAPSIndicator'
 }

But it does not work. I get no error message to know what is happening. What am I doing wrong here?

Answer 1

Add enableKeyEvents: true, this true to enable the proxying of key events for the HTML input field

{
     xtype:'textfield',
     itemId: 'field_password_login',
     fieldLabel: 'Password',
     inputType: 'password',
     allowBlank: false,
     enableKeyEvents: true,
     listeners:
     {
         keypress: function(tf, e)
         {
             if (e.getKey() != 13 && e.getKey() != 10 && e.getKey() != 127)
             {
                 if ((!e.shiftKey && (e.getKey() >= 65 && e.getKey() <= 90)) || ((e.getKey() >= 97 && e.getKey() <= 122) && e.shiftKey))
                 {
                     Ext.getCmp("app_idCAPSIndicator").setText("CAPS LOCK is ON");
                     Ext.getDom("app_idCAPSIndicator").style.color = "navy";

                 }
                 else
                 {
                     Ext.getCmp("app_idCAPSIndicator").setText("");
                 }
             }
             if (e.getKey() == 13)
             {
                 Ext.Msg.alert("Enter Pressed");
             }
         }
     }
 },

Answer 2

The Ext.event.Event has constants to many types of keys, including caps lock. Also, there is a specific event handler for this case, which is specialkey . So, expanding on Moataz's answer:

{
     xtype:'textfield',
     itemId: 'field_password_login',
     fieldLabel: 'Password',
     inputType: 'password',
     allowBlank: false,
     enableKeyEvents: true,
     listeners:
     {
         specialkey: function(tf, e)
         {
                 if (e.getKey() == Ext.event.Event.CAPS_LOCK)
                 {
                     Ext.getCmp("app_idCAPSIndicator").setText("CAPS LOCK is ON");
                     Ext.getDom("app_idCAPSIndicator").style.color = "navy";
                 }
         }
     }
 }

You should use constants instead of numbers to improve readability. That's one reason why Ext.event.Event has key constants.

ExtJS documentation defines the keys considered to be special.