Scoping issue with PhoneGap and Sencha touch

Question

I'm having issues getting some scoping right with the below app. by the time I call this.fireEvent I'm no longer scoped in my app, but rather the document window.

Any ideas?

DN.App = Ext.extend(Ext.Panel, {
    initComponent: function() {     
        document.addEventListener("backbutton", this.backKey, true);
        DN.App.superclass.initComponent.call(this);     
   },

    setActivePanel: function(){
        //global handler for switching panels
    },

    backKey: function(){
        var prev = DN.App.prevPanel[DN.App.prevPanel.length-1];
        DN.App.prevPanel.pop();

        //This handles the switching of panels, but 'this' is scoped to html document at this point
        this.fireEvent('setActivePanel',prev);
    }
});

Found an answer Bah, I worked at this for a couple hours before posting then figure it out 8 minutes later. I tried using DN.App.fireEvent but that also didn't work. I realized then that DN.App was just the class I made, not the actual object. In another file I call it as DNApp = new DN.App(); After seeing that I tried DNApp.fireEvent and it worked great.

Answer 1

The problem is "document.addEventListener("backbutton", this.backKey, true);", when the event is fired is expected the "this" keyword to be bond to the object which fired it, you could achieve what you want with a closure like:

document.addEventListener("backbutton", (function(self){ return function(){ self.backKey(); }; })(this), true);