Extjs面板。键盘事件 [英] Extjs panel. Keyboard events

问题描述

 新的Ext.Panel（{
 id ：'textPanel'，
 height：1000，
 width：1200，
 renderTo：Ext.getBody（），
 html：HTML片段或要使用的DomHelper规范作为布局元素内容，在渲染组件之后添加HTML内容，因此在触发渲染事件时，该文档将不包含此HTML。在添加任何配置的内容E1之前，该内容将插入正文。
}）; 
  

然后，当按下Enter键时，我想听事件。所以，我正在创建一个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 
}）; 
  

这样做完美，但我不想听整个文档。
如何才能听取面板？

解决方案

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

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

  Ext.namespace（'Saket'）; 
 
 Saket.FocusPanel = Ext.extend（Ext.Panel，{
 onRender：function（）
 {
 Saket.FocusPanel.superclass.onRender.apply（this ，参数）; 
 
 //这个元素允许Window被重点关注键盘事件
 this.focusEl = this.el.createChild（{
 tag：'a' href：'＃'，cls：'x-dlg-focus'，
 tabIndex：' -  1'，html：'&＃160;'}）; 
 this.focusEl.swallowEvent点击'，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：HTML片段或用作布局元素内容的DomHelper规范。在渲染组件后添加HTML内容，因此文档在渲染事件时不会包含此HTML被触发，这个内容在任何配置的内容被附加之前被插入到主体中。，
 keys：{
 key：Ext.EventObject.ENTER，
 fn：function（）{alert 'bingo'）;}，
范围：这个
} 
}）; 
  

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

I have a panel which I am rendering using following code.

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."
});

And then I want to listen to event when an enter key is pressed. So, I am creating a KeyMap as follows...

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

But the onKeyPress function is not being called.

I have already tried using

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

instead of

Ext.getCmp('textPanel').body

with no success.

If I use "document" there then the onKeyPress function is called. i.e.

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

This works perfectly but I don't want to listen to whole document. How can I listen to just the panel?

解决方案

In extjs 3.4, if you want to use KeyMap then you need to first set focus on the panel element, otherwise key events will always fire at document level hence you will not able to listen for key events on panel (that's why you were able to listen key events on document only)

But in extjs there isn't any way to set focus on panel, so therefore you will need to create a custom panel class which can set focus to itself and listen key events

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
    }
});

Demo: http://jsfiddle.net/silentsakky/PdyqW/3/

这篇关于Extjs面板。键盘事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！