This Git repository includes all of the source code used in creating a tutorial about listeners in Sencha Touch.

The tutorial includes several checkpoints:

• Blank slate - the application skeleton
• Simple logger - showing several different ways of attaching a listener to a panel
• addEvent('interact') - demonstrating how to add custom events to a component
• Capture more interactions - enhancing the custom 'interact' event
• Report interactions with a template - collecting stats in an object, and using it to populate a template
• Add reset button - adding a button that resets all counters
• One time listeners - creating listeners that expire after a single use
• Delays and buffers - creating buffered and delayed listeners

Using this repository to follow the screencast

First, you'll have to clone this repository:

git clone git://github.com/nelstrom/Sencha-Touch-listeners-demo.git

Change into the directory:

cd Sencha-Touch-listeners-demo

By default, the git clone command will only create the master branch locally. If you want to study the code at each checkpoint, you will have to fetch each of the other branches. You can do so by running the following:

git checkout -b 00_blank_slate origin/00_blank_slate
git checkout -b 01_simple_logger origin/01_simple_logger
git checkout -b 02_addEvent_interact origin/02_addEvent_interact
git checkout -b 03_capture_more_interactions origin/03_capture_more_interactions
git checkout -b 04_report_interactions_with_a_template origin/04_report_interactions_with_a_template
git checkout -b 05_add_reset_button origin/05_add_reset_button
git checkout -b 06_one_time_listeners origin/06_one_time_listeners
git checkout -b 07_delays_and_buffers origin/07_delays_and_buffers

You can review the list of local branches by running:

git branches

And you can switch between branches with the checkout command. For example, to check out the 03_capture_more_interactions branch, run:

git co 03_capture_more_interactions

Live demo

You can try out the demo here:

• http://listeners-demo.heroku.com/

This uses the code from the branch 05_add_reset_button.