Панель 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 нет никакого способа установить фокус на панели, поэтому поэтому вам нужно будет создать собственный класс панели, который может установить focu ы к себе и слушать ключевые события

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/

Answer 2

Добавить слушателей для keydown на элемент панели, используя getEl():

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