Sencha Touch 2.3：將列表視圖中的數據推送到詳細視圖

Question

所以我做了一個簡單的列表組件視圖。當我點擊一個列表的披露按鈕時，我有一個控制器將創建一個詳細視圖，該視圖還將關於該列表的數據推送到詳細視圖中以便在tpl屬性中使用。

這裏是我的代碼： 應用程序/視圖/主：

Ext.define ('Prac.view.Main', { 
extend: 'Ext.Panel', 
xtype: 'mainpanel', 
requires: ['Prac.store.Names'], 

config:{ 
    layout: 'vbox', 

    items: [ 
     { 
      xtype: 'titlebar', 
      docked: 'top', 
      title: 'Mainpanel', 
      items: [ 
       { 
        xtype: 'button', 
        ui: 'confirm', 
        iconCls: 'add', 
        action: 'addName', 
        align: 'right' 
       } 
      ] 
     }, 
     { 
      xtype: 'list', 
      flex: 1, 
      grouped: true, 
      indexBar: true, 
      itemTpl: '{firstName} {lastName}', 
      store: 'Names', 
      onItemDisclosure: true, 
     } 
    ] 
}  

}）;

應用程序/控制器/主：

Ext.define ('Prac.controller.Main', { 
extend: 'Ext.app.Controller', 

config: { 
    refs: { 
     view: 'viewpanel', 
     det: 'detail' 
    }, 
    control: { 
     'list' : { 
      disclose: 'showDetail' 
     } 
    }  
}, 
showDetail: function(list, record) { 
    var det = Ext.create('Prac.view.Detail', { 
     data: record.data 
    }); 
    Ext.Viewport.setActiveItem(det); 
} 

}）;

應用程序/視圖/詳情：

Ext.define('Prac.view.Detail', { 
extend: 'Ext.Panel', 
xtype: 'detail', 

config: { 
    items: [ 
     { 
      xtype: 'titlebar', 
      title: 'Detail View', 
      docked: 'top' 
     }, 
     { 
      xtype: 'panel', 
      styleHtmlContent: true, 
      scrollable: 'vertical', 
      title: 'Details', 
      //html: 'Hello, World!' 
      tpl: 'Hello {firstName} {lastName}', 
      data: null 
     } 
    ] 
} 

}）;

我認爲這個問題可能是範圍。由於tpl屬性嵌套在「項目」屬性而不是配置中，因此組件無法使用從控制器傳遞給詳細視圖的數據。所以我不知道如何將數據從一個視圖推送到另一個視圖，而是想知道如何將數據從一個視圖推送到另一個視圖中的特定組件。

Answer 1

你是絕對正確的。您不是設置嵌套面板的數據，而是設置Prac.view.Detail的數據。

數據是面板的配置屬性。這意味着sencha會爲您創建一個setData()方法。當您在內部使用此方法時，applyData()或updateData()將分別被調用。

你的情況，這應該工作：

Ext.define('Prac.view.Detail', { 
    extend: 'Ext.Panel', 
    xtype: 'detail', 

    config: { 
     items: [ 
      { 
       xtype: 'titlebar', 
       title: 'Detail View', 
       docked: 'top' 
      }, 
      { 
       xtype: 'panel', 
       styleHtmlContent: true, 
       scrollable: 'vertical', 
       title: 'Details', 
       //html: 'Hello, World!' 
       tpl: 'Hello {firstName} {lastName}', 
       data: null 
      } 
     ] 
    }, 

    updateData: function (newData, oldData) { 
     var nestedPanel = this.down('panel'); 
     nestedPanel.setData(newData); 
    }, 

    applyData: function (newData, oldData) { 
     var nestedPanel = this.down('panel'); 
     nestedPanel.setData(newData); 
    } 
}); 

所以，當一個設置Prac.view.Detail的applyData方法將被調用的數據，並將其抓住嵌套的面板設置其數據代替。