Sencha Touch 2：將數據從控制器傳遞到視圖

Question

我正在嘗試從列表中加載詳細信息視圖，但沒有使用NavigationView和「push（）」命令。

控制器：

Ext.define('App.controller.MyPlans', { 
    extend: 'Ext.app.Controller', 
    requires: ['App.view.EventDetail', 
     'App.view.PlansContainer'], 

    config: { 
     refs: { 

     }, 
     control: { 
      'MyPlansList': { 
       disclose: 'onDisclose' 
      } 
     } 
    }, 

    onDisclose: function (view, record) { 
     console.log("My Plans list disclosure " + record.get('id')); 
     var eventDetailView = Ext.create('App.view.EventDetail'); 
     eventDetailView.setRecord(record); 
     Ext.Viewport.setActiveItem(eventDetailView); 
    } 
}); 

VIEW：

Ext.define('App.view.EventDetail', { 
    extend: 'Ext.Panel', 
    xtype: 'EventDetail', 

    config: { 

     items: [{ 
      xtype: 'toolbar', 
      docked: 'top', 
      title: 'Event Name', 
      items: [{ 
       xtype: 'button', 
       id: 'addRunBackBtn', 
       ui: 'back', 
       text: 'Back' 
      }] 
     }, { 
      xtype: 'panel', 
      styleHtmlContent: true, 
      itemTpl: [ 
       '<h1>{name}</h1>', 
       '<h2>{location}</h2>', 
       '<h2>{date}</h2>'] 
     }], 

    } 
}); 

我基本上是試圖將數據傳遞到使用 「setRecord（）」 命令，但似乎沒有什麼是視圖在視圖中加載。有什麼想法嗎？？

感謝

Answer 1

而不是ItemTpl只是寫Tpl。我懷疑沒有list xtype的itemTpl存在。

另一件事是把太平人壽內部配置：

{tpl:['<div class="ListItemContent">{descriptionddata}</div>']} 

答案之前/我上面是好的，但如果你打算保持裏面查看您的格式，而不是在控制器的話，它的工作原理是使用，而不是使用setData setRecord

detailview.setData({title:record.get('title'), description:record.get('descriptiondata')}); 

Answer 2

我發現這裏的問題：

的面板沒有一個itemTpl

{ 
    xtype: 'panel', 
    styleHtmlContent: true, 
    itemTpl : [ 
     '<h1>{name}</h1>', 
     '<h2>{location}</h2>', 
     '<h2>{date}</h2>' 
    ] 
} 

可能的方式做一個則可能是：

更改VIEW：

{ 
    xtype: 'panel', 
    id: 'thePanel', 
    styleHtmlContent: true 
} 

更改控制器：

onDisclose: function(me, record, target, index, e, eOpts) { 
    ... 
    Ext.getCmp('thePanel').setHtml('<h1>'+record.get('name')+'</h1><h2>'+record.get('location')+'</h2><h2>'+record.get('date')'</h2>'); //For setting the Data 
    ... 
} 

希望這可以幫助！

Answer 3

取而代之的面板試列表如下

Ext.define('App.view.EventDetail', { 
    extend: 'Ext.TabPanel', 
    xtype: 'EventDetail', 
    config: { 
     items: [{ 
      xtype: 'toolbar', 
      docked: 'top', 
      title: 'Event Name', 
      items: [{ 
       xtype: 'button', 
       id: 'addRunBackBtn', 
       ui: 'back', 
       text: 'Back' 
      }] 
     }, { 
      xtype: 'list', 
      styleHtmlContent: true, 
      itemTpl: [ 
       '<h1>{name}</h1>', 
       '<h2>{location}</h2>', 
       '<h2>{date}</h2>'] 
     }], 
    } 
});