Take the 2-minute tour ×

I am following along very closely with the code within the GeoCongress.us App, as this is my first Sencha Touch app and the premise behind that app's layout functionality is similar to what I hope to achieve.

I am having an issue getting a List object to respond to the itemtap event though. My intent is to capture the itemtap event at the SetsScreen level, fire my own custom event which my App object would listen for, and App could then handle the process of displaying a new card (based on the item tapped).

First, the SetsScreen object (relevant portions of it at least):

DataSets.views.SetsScreen = Ext.extend(Ext.Panel, {
    cls: 'sets-screen',
    layout: 'card',

    initComponent: function() { 
        // Build the main content list and add it to the main scren
        this.setsList = new DataSets.views.SetsList({
            scroll: false
        this.setsList.on('itemtap', this.onListItemTap, this);

        this.main = new Ext.Container({
            scroll: true,
            items: [this.setsList]

        this.items = [this.main];

    onListItemTap: function(dv, index, item, e) {

Here is my SetsList object (nothing really amazing here):

DataSets.views.SetsList = Ext.extend(Ext.List, {
    itemSelector: '.sets-list-item',
    singleSelect: true,

    initComponent: function() {
        this.store = DataSets.stores.Sets;
        this.itemTpl = Ext.XTemplate.from('sets-list');


And the Sets object is nothing more than a quick data model and Ext.data.Store:

Ext.regModel('Sets', {
    idProperty: 'id',
    fields: [

DataSets.stores.Sets = new Ext.data.Store({
    model: 'Sets',
    data: [
        {id: 0, title: 'Weight', last_updated: new Date('11/28/2010 00:00:00 AM GMT-0600'), current_value: 145},
        {id: 1, title: 'Cups of Coffee', last_updated: new Date('11/28/2010 07:00:00 AM GMT-0600'), current_value: 1}
share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

Oh man - I don't know how I stumbled across this answer, a very obscure typo was the only thing preventing this from working.

Ext.List() uses it's itemSelector property to determine what element qualified for a "tap". My itemSelector was set to .sets-list-item but the template had <div class="set-list-item">. Correcting the template and itemtap is firing as expected.

share|improve this answer
add comment

You might need to look at the updated screencast - since some of the API's changed in the 1.0 release and the older screencast is now out of synch.

share|improve this answer
Never even saw the screencasts - thanks for the link! This is in reference to GeoTweets (not GeoCongress, which I am using to learn from) but I'm going to watch it anyway for clues. Nonetheless, I am referencing the valid 1.0 API documentation and nothing is standing out. –  Michael Wales Nov 30 '10 at 1:37
Or is it now out of "syncha"? –  Old McStopher Jul 1 '11 at 16:21
add comment

Your Answer


