Question

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

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

没有成功。

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

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

这完美无缺，但我不想听整个文件。我该如何只听小组讨论？

Answer 1

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

但是在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/

Answer 2

使用keydown在面板元素上添加getEl()的侦听器：

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

Extjs面板。键盘事件

2 个答案: