Question

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];
        DataSets.views.SetsScreen.superclass.initComponent.call(this);
    },

    onListItemTap: function(dv, index, item, e) {
        alert('Test');
    }
});

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');

        DataSets.views.SetsList.superclass.initComponent.call(this);
    }
});

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

Ext.regModel('Sets', {
    idProperty: 'id',
    fields: [
        'title',
        'last_updated',
        'current_value'
    ]
});

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}
    ]
});

Answer 1

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.