Доступ к данным родительского компонента из дочернего компонента в Sencha Touch 2

Question

Я пишу приложение Sencha Touch 2. Я недавно застрял в следующей проблеме.

У меня есть вид контейнера, у которого есть данные, привязанные к нему с помощью setRecord (myRecord). Итак, мой вопрос в том, какой правильный способ заполнить мои подкомпоненты этими данными?

Вот мой код (упрощенно для краткости):

Ext.define('MyApp.model.Item', { 
    extend: 'Ext.data.Model', 
    config: { 
    fields: ['name', 'description', 'image'], 
    proxy: { /* proxy config */ } 
    } 
}); 

Ext.define('MyApp.view.DetailsView', { 
    extend: 'Ext.Container', 
    xtype: 'itemdetails', 

    config: { 
    layout: 'hbox', 
    items: [ 
     { 
     xtype: 'container', 
     flex: 1, 
     layout: 'vbox', 
     items: [ 
      { 
      xtype: 'img', 
      src: '' // SHOULD BE POPULATED FROM DATA.image 
      }, 
      { 
      xtype: 'button', 
      text: 'Buy', 
      action: 'buyItem' 
      } 
     ] 
     }, 
     { 
     flex: 3, 
     tpl: '<h1>{name}</h1><p>{description}</p>' // SHOULD BE POPULATED FROM DATA 
     } 
    ] 
    } 
}); 

А вот код, который заполнит и показывает мой взгляд от контроллера:

Ext.define('Myapp.controller.Main', { 
    ... 
    refs: { 
     itemDetails: { 
     selector: '', 
     xtype: 'itemdetails', 
     autoCreate: true 
     } 
    } 
    routes: { 
     'item/details/:id': 'showItemDetails' 
    }, 
    ... 

    showItemDetails: function(id) { 
     MyApp.model.Item.load(id, { 
     callback: function(item){ 
      var card = this.getItemDetails(); 
      card.setRecord(item); 
      this._showCard(card); 
     }, 
     scope: this 
     }); 
    } 
}); 

я впервые реализовал это с простым Контейнер, содержащий «tpl», но в этом случае у меня не было кнопки внутри него, которое было бы запрошено у контроллера. Есть идеи?

Thx, заранее.

Answer 1

Взятые из комментария в Документах Сенча сенсорный для Ext.Component, добавить функцию setRecords рекурсивно устанавливает рекорд по каждой позиции в иерархии элементы компонента:

setRecords: function(component, record) { 
    me = this; 
    component.getItems().each(function(item) { 
     if (typeof item.setRecord == 'function') { 
      item.setRecord(record); 
     } 

     //set record on all subitems 
     if (typeof item.getItems == 'function') { 
      var subItems = item.getItems(); 
      if (subItems.getCount() > 0) { 
       me.setRecords(item, record); 
      } 
     } 
    }); 
} 

, а затем переопределить setRecord вызвать новую функцию :

setRecord: function(record) { 
    result = this.callParent([record]); 
    this.setRecords(this, record); 
    return result; 
} 

Так что теперь больше нет необходимости в явном виде установить данные о конкретных компонентах