1

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

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 函数。IE

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

这非常有效，但我不想听整个文件。我怎样才能只听面板？

4

2 回答 2

2

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

于 2013-10-04T20:45:27.700 回答
0

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

Ext.getCmp('textPanel').getEl().on('keydown', function(f, e) {
    if (e.getKey() === Ext.EventObject.ENTER)
    {
        //do whatever you want here
    }
});
于 2013-07-01T14:07:11.657 回答