Question

I created List using sencha touch 2.

var aroundList = Ext.create('Ext.List', {
    itemCls : 'my-dataview-item',
    id : 'aroundMeList',
    itemTpl : '<div><img style="padding:1px; border-style:solid; border-width:1px; border-color:{trustColor}" src="' + localStorage.httpServerPrefix + '{imageURI}"/><span id="name">{fullname}</span><span id="time">{time}</span><p id="msg">{text}<span id="count">&nbsp;{replyCount}&nbsp;</span></p><p id="dist">&nbsp;< '+localStorage.radius+''+localStorage.unit+' '+'&nbsp;</p></div>',
    store : aroundStore,
    listeners : {
        select : {
            fn : this.onMessageClickedInAround,
            scope : this
        }
    }
});

I am getting output like this (Not exactly but, something like this)

when user clicks first row or first item in the List, i am calling onMessageClickedInAround method (this method is for showing messages from that user), you can see the above code.

now i have a requirement that, when the user clicks any picture in the List, i need to show that corresponding Profile page (that is, one user can see others profile by clicking image in the List), is there any way i can do this ?

Answer 1

If your list is populating by a data source, sencha touch will pass the corresponding record to your itemTap listeners. You can do that as something like following.

    listeners : {
        itemtap: function (list, index, item, record) {
            // Show next view based on current record
        }
    }

If you only want to do it on image tap you can check for the event in that listener.

    listeners : {
        itemtap: function (list, index, item, record, senchaEvent) {
            if (senchaEvent.event.target.nodeName === 'img') {
                // Show next view
            }
        }
    }

You can give a class to <img> and check for that as well.