Extjs 面板。键盘事件答案

【问题标题】：Extjs panel. Keyboard eventsExtjs 面板。键盘事件
【发布时间】：2013-07-01 13:31:39
【问题描述】：

我有一个面板，我正在使用以下代码进行渲染。

new Ext.Panel({
    id: 'textPanel',
    height: 1000,
    width: 1200,
    renderTo: Ext.getBody(),
    html:"An HTML fragment, or a DomHelper specification to use as the layout element content. The HTML content is added after the component is rendered, so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended."
});

然后我想在按下回车键时监听事件。所以，我正在创建一个 KeyMap 如下...

var map = new Ext.KeyMap(Ext.getCmp('textPanel').body, {
    key: Ext.EventObject.ENTER,
    fn: onKeyPress,
    //  handler: onKeyPress,
    scope: this
});

但是 onKeyPress 函数没有被调用。

我已经尝试过使用

Ext.getCmp('textPanel').body.dom,
Ext.getCmp('textPanel').el.dom,
Ext.getCmp('textPanel').el

而不是

Ext.getCmp('textPanel').body

没有成功。

如果我在那里使用“文档”，则会调用 onKeyPress 函数。即

var map = new Ext.KeyMap(document, {
    key: Ext.EventObject.ENTER,
    fn: onKeyPress,
    //  handler: onKeyPress,
    scope: this
});

这很好用，但我不想听整个文档。我怎样才能只听面板？

【问题讨论】：

“听面板”是什么意思？你的面板应该是TextField 吗？在普通的Ext.Panel 上听关键事件是没有意义的...
我的面板正文中有文本。当在面板主体内按下回车键或制表键时，我想做一些事情。

标签： javascript extjs extjs4 keyboard-shortcuts extjs3

【解决方案1】：

在 extjs 3.4 中，如果你想使用KeyMap，那么你需要首先将焦点设置在面板元素上，否则键事件将始终在文档级别触发，因此你将无法监听面板上的键事件（即为什么你只能在文档上监听关键事件）

但在 extjs 中没有任何方法可以将焦点设置在面板上，因此您需要创建一个自定义面板类，该类可以将焦点设置为自身并监听关键事件

Ext.namespace('Saket');

Saket.FocusPanel = Ext.extend(Ext.Panel, {
    onRender : function()
    {
        Saket.FocusPanel.superclass.onRender.apply(this, arguments);

        // this element allows the Window to be focused for keyboard events
        this.focusEl = this.el.createChild({
                    tag: 'a', href:'#', cls:'x-dlg-focus',
                    tabIndex:'-1', html: '&#160;'});
        this.focusEl.swallowEvent('click', true);

        this.getEl().on({
            click : this.focus,
            scope : this
        });
    },
    focus : function()
    {
        this.focusEl.focus();
    }    
});

new Saket.FocusPanel({
    id: 'textPanel',
    height: 200,
    width: 300,
    renderTo: Ext.getBody(),
    html:"An HTML fragment, or a DomHelper specification to use as the layout element content. The HTML content is added after the component is rendered, so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.",
    keys: {
        key: Ext.EventObject.ENTER,
        fn: function() {alert('bingo');},
        scope: this
    }
});

演示：http://jsfiddle.net/silentsakky/PdyqW/3/

【讨论】：

感谢您的回答，这从概念上解释了为什么我无法在面板上捕获事件。

【解决方案2】：

使用getEl()在面板元素上为keydown添加一个监听器：

Ext.getCmp('textPanel').getEl().on('keydown', function(f, e) {
    if (e.getKey() === Ext.EventObject.ENTER)
    {
        //do whatever you want here
    }
});

【讨论】：

您使用的是什么版本的 ExtJS？这适用于 4.1.3 和 4.2.1。