Why are my key events not working

Question

Why are my key events not working in the following example? The 'blur' event works, but none of the key events work on my textfield (I also tried 'keydown').

I tried using the 'control' construct on the controller as well, but that doesn't work either.

Ext.define('Plus.view.MyController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.mycontroller',
    control: {
        '#mytextfield': {
            blur: function() {
                alert("oink")
            },
            keypress: function() {
                alert("moo")
            },
            keyup: function() {
                alert("quack")
            }
        }
    }
});

Ext.define('Plus.view.MainView', {
    extend: 'Ext.container.Container',

    items: [{
        xtype: 'textfield',
        id: 'mytextfield',
        controller: 'mycontroller',
        listeners: {
            blur: function() {
                alert("oink 2")
            },
            keypress : function() {
                alert("moo 2")
            },
            keyup : function() {
                alert("quack 2")
            }
        }
    }]
});

Ext.application({
    name: 'Plus',
    autoCreateViewport: 'MainView',
    launch: function() {

    }
});

My fiddle is here :

https://fiddle.sencha.com/#fiddle/1d5d

Am I missing something obvious?

Answer 1

keypress and keyup These event only fires if enableKeyEvents is set to true. Set this and your code will work. I created a fidller for you where code is working. Fiddle