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

Я пишу приложение 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», но в этом случае у меня не было кнопки внутри него, которую можно было бы запрашивать из контроллера. Есть идеи?

Спасибо, заранее.


extjs extjs4 sencha-touch-2
person vkryachko    schedule 25.03.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Взято из комментария в документации Sencha Touch для 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;
}

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

person tazmaniax    schedule 20.08.2012