Tuesday, April 10, 2012

Sencha Touch Debugging

I will start by prefacing this post with it is often very frustrating to try to debug Sencha based frameworks.  My particular gripe in this case is with Sencha Touch 2.0.  I am working on a little project to get more familiar with Sencha Touch.  The project is hosted on github if you want to look on and see what I am doing.  (Maybe you can shed some light on my stupidity.)

NOTE: This is not a post on how to debug Sencha Touch.  My intention is to document what I am seeing and hopefully find someone with similar issues or with a solution.  Check back later for the resolution, as I am sure it will be something ultimately simple.

My issue at the moment is the Observable mixin.  I have a controller, MlbSchedule, that is watching an event fired by the TeamList.  The event, itemtap, is caught by the MlbSchedule controller.  Then the method drillInOnTeam is then called.  So far so good.
Ext.define("MlbSchedule", { extend: 'Ext.app.Controller', mixins: ['Ext.mixin.Observable'], ... initializeListeners: function() { var tList = this.getTeamList(); tList.on("itemtap", this.drillInOnTeam); }

drillInOnTeam fires an event teamSelected, which does nothing more than pass the record along.  The intent here is to send the record out to the listener to transfer control to the next controller that is set to handle the selection of the item in the list.
drillInOnTeam: function(dataView, index, target, record, event, options) { console.log(this.fireEvent("teamSelected", record)); }
The application, app.js, initializes the listener attached to the MlbSchedule controller as follows.  There are no errors at this point and everything appears to be in good working order.
initializeListeners: function() { var mlb = this.getController("MlbSchedule"); mlb.on("teamSelected", this.showTeamNews, this); }
Now, when clicking the row list item, everything fires except he method showTeamNews is never executed.  I am not at a loss.

How do you debug this?  I can step through the various steps of the fireEvent method.  Is there a better approach?

It turns out that the event teamSelected was being fired off of the TeamList instance instead of the MlbSchedule instance.  (face palm)
initializeListeners: function() { var tList = this.getTeamList(); tList.on("itemtap", this.drillInOnTeam, this); }
Something so inane.  I don't know how Sencha can correct this sort of developer stupidity.

However, the garbage man showed up as I was writing this post.  I had not put the trash out yet and chased him down and even assisted in loading all the garbage from my current home project into the truck.  This is a good reminder that sometimes the simplest solution is to walk away.

No comments:

Post a Comment