Question

I have a List generated from JSON data in Sencha Touch. Essentially, the list is generated from a Data Store object and acts as a Contacts list. I would like to know how to add functionality so that when the user taps on one of the list items, an Action Sheet is shown in Sencha Touch, offering a number of actions (such as ‘Call’, ‘Send Message’ and ‘Delete’).

Here’s the code I’m using to generate the ListvIew:

var listView = new Ext.List({
    store: friendStore,
    itemTpl: '{forename} {surname}<br />{phoneNumber}',
    grouped: true,
    indexBar: true
});

I know that I could possibly use the on parameter, but that will append the tap event to the List, rather than each item. The displayed action sheet will contain some links as well with the tel:// so it needs to be dynamic as well (since the telephone number to call is also stored in the Data Store under the key {phoneNumber}

Hope that makes sense…

Answer 1

ListView has an itemtap event you should listen for. From the docs:

itemtap : ( Ext.DataView view, Number index, Ext.Element item, Ext.EventObject e )

To get the record that corresponds to the tapped item just do view.getStore().getAt(index). Then in your event handler just recreate the ActionSheet based on the data from the record and show it.

Also attaching the listener to the list is more memory efficient than attaching to each individual item.