CODEWITHSUNDEEP
javascriptoopextjssencha-touch
Michael Wales
Michael Wales

Reputation: 10628

Sencha Touch: List ItemTap Event Firing

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

Upvotes: 2

Views: 13002

Answers (2)

Michael Wales
Michael Wales

Reputation: 10628

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.

Upvotes: 1

Michael Mullany
Michael Mullany

Reputation: 31705

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.

Upvotes: 0

Related Questions