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>'] 
     }], 
    } 
});