javascript - Extjs 面板。键盘事件

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

没有成功。

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

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

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

Answer 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: ' '});
        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/