PDA

View Full Version : Function undefined when defining listener for my extended TreePanel



KallDrexx
25 Nov 2010, 8:27 PM
I have a feeling I am doing something stupid here, but I'm not sure what. I am trying to tie a function to my extended TreePanel's dblClick event. I have the following code:



MyApp.panels.ObjectPanel = Ext.extend(Ext.tree.TreePanel, {
split: true,
rootVisible: false,
documentId: null,
initComponent: function () {
MyApp.panels.ObjectPanel.superclass.initComponent.call(this);

// InitComponent code here...
},

listeners: {
dblclick: this.onNodeSelected
},

onNodeSelected: function (node) {
// Event handler code is here
}
});



This produces the following error: Uncaught TypeError: Cannot read property 'fn' of undefined

I tried to move all the onNodeSelected code inside the listeners declaration, and that works perfectly. For some reason it appears that if I try to point an event to a declared function, I get an error, and if I take out the 'this' and just put onNodeSelected after dblclick, I get an error that onNodeSelected does not exist.

What am I doing wrong?

evant
25 Nov 2010, 8:47 PM
Think about what you're doing:



MyClass = Ext.extend(....);


This is an assignment statement. It would be like doing:



var x = x + 1;


You're trying to access the value before it's even been evaluated. Even assuming you could do that, the "this" scope you're referring to would be incorrect anyway.

Bind the listeners in initComponent.

KallDrexx
25 Nov 2010, 9:17 PM
Oh duh, thanks.

Animal
25 Nov 2010, 10:41 PM
An alternative approach could be to return the definition object from a function (In this case a function called as a constructor by prepending the "new" keyword)

That way, functions can be defined, and then referenced anywhere in the returned definition object:



MyApp.panels.ObjectPanel = Ext.extend(Ext.tree.TreePanel, new function() {

function nodeSelectHandler() {
// event handler code is here
}

// We are in a constructor, so apply all properties to "this"
Ext.apply(this, {
split: true,
rootVisible: false,
documentId: null,
initComponent: function () {
MyApp.panels.ObjectPanel.superclass.initComponent.call(this);

// InitComponent code here...
},

listeners: {
dblclick: nodeSelectHandler // Referenced defined function
// What is the scope ("this" reference) going to be when it's called?!
},
});
});