Extjs panel. Keyboard events

问题

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?

回答1:

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: '&#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
    }
});

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

回答2:

Add a listeners for keydown on the panel's element using getEl():

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

来源：https://stackoverflow.com/questions/17405710/extjs-panel-keyboard-events

标签

javascript

extjs

extjs4

keyboard-shortcuts

extjs3