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

我正在写一个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'的容器，但在这种情况下，我无法在其中放置一个按钮，这可以从控制器查询。有任何想法吗？

Thx，提前。

来源

2012-03-25 vkryachko

从煎茶触摸文档的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; 
}

所以现在不再需要显式设置特定组件

数据

来源

2012-08-20 09:34:12 tazmaniax

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

回答

相关问题