Javascript Ext JS事件未触发，但我可以'；我不明白为什么

我正在使用Ext.tree.Panel派生对象来模拟菜单导航栏。我的目标是让“用户”选项卡围绕屏幕并到达菜单，此时用户可以使用上/下/左/右键来导航菜单，就像您可以使用键盘在Windows资源管理器中的树面板中导航一样

这一切都显示良好，但我无法掌握键盘事件。好吧，它有时会在很多起伏之后触发，但我希望能马上得到它。我知道事件是在ExtJS中处理的，因为我看到它到达了发布函数中，该函数将它发送给所有感兴趣的对象。它只是没有路由到我的处理程序。有什么想法吗？下面是我设置处理程序的代码。我已经将它们放在afterrender中，以防元素尚未创建时出现计时问题

Ext.define('CSSL.view.menubar.Menubar', {
extend: 'Ext.tree.Panel',
xtype: 'menubar',

controller: 'menubar',
viewModel: {
    type: 'menubar'
},

listeners: {
    afterrender: function (comp, eOpts) {
        var el = comp.getTargetEl();
        el.on('keydown', function (e, comp, x) {
            console.log(e.type + ' [in menu]\r\n');
        }, comp);
        el.dom.addEventListener('keydown', function (e, comp, x) {
            console.log(e.type + ' [in menu]\r\n');
        });
    },
    beforeselect: 'onSelectionChange',
    focus: 'onFocus',
    blur: 'onBlur'
    //itemkeyup: 'onItemKeyUp',
},
rootVisible: false,

依此类推，直到代码的其余部分。有趣的是，将事件监听器直接添加到Dom元素处理程序（addEventListener）确实有效，而且效果一致。我只想知道发生了什么，因为我更愿意使用ExtJS处理程序系统而不是基本javascript

谢谢