2012-03-25 97 views
1

我正在寫一個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,提前。

回答

0

從煎茶觸摸文檔的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; 
} 

所以現在不再需要顯式設置特定組件

數據