View Full Version : Multibrowser problem with listener

28 Mar 2012, 2:35 AM

I have defined a custom panel and I want add default listeners.
This is working in IE, but not in Chrome and Firefox.
On contextMenu I get the alert, but not on key down.
Any help? ThanksĄ

Ext.define('Ext.ux.myPanel', {
extend: 'Ext.panel.Panel'

, alias: 'widget.myPanel'

, initComponent: function () {
this.listeners.scope = this;

, listeners: {
scope: ''

, keydown: {
element: 'el',
fn: function (iEvent, iElement) {
var keyCode = iEvent.getKey();

, contextmenu: {
element: 'el',
fn: function () {


, onRender: function (ct, position) {
var me = this;
// Render internal structure

//my render....


28 Mar 2012, 6:10 AM

first a general hint: only add primitives directly as configs, otherwise these objects / arrays / functions will get added on prototype level so that they get shared for all instances.

for example use the initComponent method and add them there like this.listeners = ... or use Ext.apply(this, {...});

you are delegating the events to the dom node of the container, which can cause problems since keyevents will only trigger if this dom node has focus. you could also add them to the panel.body, but for most usecases it makes more sense to add them to the children (like input fields).

Ext.window.Window uses listeners for the ESC key, calling a method that is defined in panel:

var keyMap = me.getKeyMap();
keyMap.on(27, me.onEsc, me);

you could use a syntax like this as well, e.g. inside the initComponent under the callParent() call.

28 Mar 2012, 7:46 AM

But I have the same behavior: IE ok, the others, fail

I have add this

, afterRender: function () {
var me = this, keyMap;


keyMap = me.getKeyMap();
keyMap.on(40, me.downOneRowScroll, me);


, getKeyMap: function () {
return this.keyMap || (this.keyMap = new Ext.util.KeyMap(Ext.apply({
target: this.el
}, this.keys)));