Sencha touch 2 - Displaying a nested Model in a DataView - sencha-touch

Question

I have a model that represents a user. The user has some personal fields (name, family) and another Model as hasMany (his phones, for example).
Something like that:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
config: {
fields: ['ID', 'Name', 'Family'],
hasMany: { model: 'MyApp.model.Phone', name: 'Phones', associationKey: 'phones' }
}
});
Ext.define('MyApp.model.Phone', {
extend: 'Ext.data.Model',
config: {
fields: ['ID', 'Phone', 'Type']
}
});
Now, I'd like to load it to a dataview (which I did successfully) and would like to show the user info, then the list of the phones that belong to him and when a user taps a phone - to show it using a layout (or message, or anything - the point is to get it's ID)
The problem is that when I use itemtap it gets me the whole record, including the user info and all the phones - so I can't really know what phone was tapped.
To show the user info I just use the itemTpl that shows the info and then lists all the phones.
So - how can I know what phone was tapped?
Thanks!
Roman

Answer 1

There is no clean way to do this, unless you directly bind the phones (userRecord.phones()) store to the dataview. Instead, you will need to get he target of the itemtap event and check what element that is.
itemtap: function(me, index, target, record, e) {
var el = Ext.get(e.target);
alert(el.dom.innerHTML);
}
Full example:
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create('Ext.DataView', {
fullscreen: true,
store: {
fields: ['name'],
data: [
{ name: 'one' },
{ name: 'two' }
]
},
itemTpl: '{name} <span>tap me</span>',
listeners: {
itemtap: function(me, index, target, record, e) {
var el = Ext.get(e.target);
alert(el.dom.innerHTML);
}
}
});
}
});