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

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

1 голос
/ 25 марта 2012

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

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

1 Ответ

0 голосов
/ 20 августа 2012

Взятый из комментария в документах 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;
}

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

...