CODEWITHSUNDEEP
javascriptextjsextjs4keyboard-shortcutsextjs3
Pratik Patel
Pratik Patel

Reputation: 1355

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?

Upvotes: 1

Views: 9670

Answers (2)

Saket Patel
Saket Patel

Reputation: 6683

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/

Upvotes: 2

kevhender
kevhender

Reputation: 4405

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

Upvotes: 0

Related Questions