ExtJS показать сообщение, если Caps Lock включен

Question

Я хочу добавить сообщение, если при вводе пароля пользователь включил заглавные буквы.Это то, что я пробовал до сих пор.

 {
     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'
 }

Но это не работает.Я не получаю сообщение об ошибке, чтобы знать, что происходит.Что я тут не так делаю?

Answer 1

Ext.event.Event имеет константы для многих типов ключей, включая заглавные буквы.Кроме того, для этого случая есть специальный обработчик событий: specialkey .Итак, развивая ответ Моатаса:

{
     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";
                 }
         }
     }
 }

Вы должны использовать константы вместо чисел для улучшения читабельности.Это одна из причин, по которой Ext.event.Event имеет ключевые константы.

Документация ExtJS определяет ключи, которые считаются специальными.

Answer 2

Добавить enableKeyEvents: true, это true, чтобы включить прокси-сервер ключевых событий для поля ввода HTML

{
     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");
             }
         }
     }
 },