Sencha touch 2 - Отображение вложенной модели в DataView

Question

У меня есть модель, представляющая пользователя. У пользователя есть некоторые личные поля (имя, семья), а другая модель - hasMany (например, его телефоны).

Нечто подобное:

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

Теперь я хотел бы, чтобы загрузить его в DataView (который я успешно), и хотел бы, чтобы показать информацию о пользователе, то список телефонов, которые принадлежат к нему и когда пользователь забирает телефон - показывать его с помощью макета (или сообщения или чего-то еще - нужно получить его ID)

Проблема в том, что когда я использую itemtap, он получает всю запись, включая информацию о пользователе и все телефоны, поэтому я не могу понять, какой телефон был использован.

Чтобы показать информацию о пользователе, я просто использую itemTpl, который показывает информацию, а затем перечисляет все телефоны.

Итак - как я могу узнать, какой телефон был использован?

Спасибо! Roman

Answer 1

Существует нет чистого способа сделать это, если вы напрямую не привязаете магазин (userRecord.phones()) к dataview. Вместо этого вам нужно будет установить целевое значение события itemtap и проверить, что это за элемент.

itemtap: function(me, index, target, record, e) { 
    var el = Ext.get(e.target); 
    alert(el.dom.innerHTML); 
} 

Полный пример:

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