Question

There is an Editor grid panel.
I am trying to add a listener to the cell click event. I have tried to do it in different ways:

gridPanel.addListener('cellclick',myfunction);  

inside the grid:

listeners: {
    cellclick: myfunction
}

I have tried to do it in the selectionModel object.
None of them worked.
Where can be the problem?

Answer 1

If you can’t add the listener as a config parameter, it’s probably because you’re having problems with the callback function not being in scope, similar to this:

> var obj = { greetMe: this.sayHi, sayHi: function(){ console.log('hi'); }};
undefined

> obj.greetMe();
TypeError: Property 'greetMe' of object #<Object> is not a function

> obj.greetMe
undefined

In the first line, this was still referring to the global (read: window) object at the time the object was defined. So this.sayHi === window.sayHi === undefined. The same thing happens when you define Ext config objects. Try defining the callback inline:

> var obj = { greetMe: function(){ console.log('hi'); }};
undefined

> obj.greetMe()
hi

Other options:

1. Define the function in a wider scope, outside of your class
2. Attach the listener within the constructor or within initComponent, by which time your class methods should be instantiated
3. Attach the listener sometime later