Question

我正在写一个Sencha Touch 2应用程序。我最近遇到了以下问题。

我有一个Container视图，其中包含使用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'的简单Container实现它，但在这种情况下我无法在其中有一个按钮，可以从控制器查询。有什么想法吗？

Thx，提前。

Answer 1

取自Ext.Component的Sencha Touch文档中的评论，添加一个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;
}

所以现在不再需要明确设置特定组件的数据

从Sencha Touch 2中的子组件访问父组件的数据

1 个答案: