Sencha Touch itemtap

extjs, sencha-touch

Solution

The first argument passed to the itemtap event isn't the record of the List item tapped, it's the DataView itself.

From the docs:

itemtap : ( Ext.DataView this, Number index, Ext.Element item, Ext.EventObject e ) Fires when a node is tapped on

Listeners will be called with the following arguments:
this : Ext.DataView
    The DataView object
index : Number
    The index of the item that was tapped
item : Ext.Element
    The item element
e : Ext.EventObject
    The event object

You can grab the tapped record by using:

dataView.store.getAt(index); // where 'dataView' is 1st argument and 'index' the 2nd

Problem

I have a list of contacts that sencha touch is displaying in a list. Then when you click a name in the list it should slide to the right and say Hello {contact name}! but when it slides over right now it just says Hello !on line 29 is where the action is happening for item tap i belive the problem is here. I just dont know how to format it correctly. Below is my source code. ``` ListDemo = new Ext.Application({ name: "ListDemo", launch: function() { ListDemo.detailPanel = new Ext.Panel({ id: 'detailpanel', tpl: 'Hello, {firstName}!', dockedItems: [ { xtype: 'toolbar', items: [{ text: 'back', ui: 'back', handler: function() { ListDemo.Viewport.setActiveItem('disclosurelist', {type:'slide', direction:'right'}); } }] } ] }); ListDemo.listPanel = new Ext.List({ id: 'disclosurelist', store: ListDemo.ListStore, itemTpl: '<div class="contact">{firstName} {lastName}</div>', listeners:{ itemtap: function(record, index){ ListDemo.detailPanel.update(record.data); ListDemo.Viewport.setActiveItem('detailpanel'); } } }); ListDemo.Viewport = new Ext.Panel ({ fullscreen: true, layout: 'card', cardSwitchAnimation: 'slide', items: [ListDemo.listPanel, ListDemo.detailPanel] }); } ``` });

Original source