从控制器传递数据到sencha现有的视图tocuh

Question

我想从控制器传递数据到现有的视图，我试过以下但他们都不工作，我想传递一个数据，以便我可以显示它一个现有的面板。

从控制器

1. Ext.Viewport.setActiveItem('profileinfo'); 
    Ext.Viewport.setData(record.data); 

2. Ext.Viewport.setActiveItem('profileinfo').setData(record.data); 

3. Ext.Viewport.setActiveItem('profileinfo', {data:record.data}); 

4. Ext.Viewport.setActiveItem({ xtype:'profileinfo', data:record.data}); 

其中profileinfo是那里有一个titlebar面板，我显示title为{member_data}这是数据

loadList:function(me, index, target, record, e, eOpts){ 


     console.log(record.data.member_name); 

      Ext.Viewport.setActiveItem({ 
       xtype:'profileinfo', 
       data:record.data} 
      ); 



    } 

我可以在我的profileinfo面板的initialize看到的一部分功能data可用 但我无法使用访问它210

initialize: function(){ 
     this.callParent(); 

     console.log("initialized"); 
     console.log(this.config.data); // able to see the data 
    } 

但数据没有反映在面板

{ 

     xtype:'titlebar', 
     title:'{member_name}' // its displaying {member_name} text rather then data itself 


    } 

更新

这里是profileinfo代码

Ext.define('demo.view.ProfileInfo', { 
     extend: 'Ext.form.Panel', 
     xtype: 'profileinfo', 
     requires: [ 'Ext.TitleBar','demo.view.ProfileMemberInfo'], 
     config: { 


      layout:'vbox', 


      items: [ 

      { 
       xtype: 'titlebar', 
       title: 'demo', 
       cls: 'bms-bg-head', 
       height:'65px', 
       center:true, 
       html:'<div class="demo-mini-logo"></div>' 
      },{ 




        xtype:'label', 
        // nothing is visible here 
        html:'{member_name}' 



      }] 
     }, 

     initialize: function(){ 
      this.callParent(); 

      // record is visible 
      console.log(this.config.record); 





    } 

}); 

这里控制器代码

loadList:function(me, index, target, record, e, eOpts){ 



      Ext.Viewport.setActiveItem({ 
       xtype:'profileinfo', 
       record:record 
       } 
      ); 





    } 

Answer 1

你说你越来越面板的initialize方法的数据，所以，你可以做到这一点

initialize: function(){ 
     this.callParent(); 
     console.log("initialized"); 
     var data = this.config.data; 
     this.down('titlebar').setTitle(data.member_data); 
} 

---

根据您的意见，您可以将数据设置为面板，您setRecord。

更新

不得不在FormPanel中的引用在你的控制器

config : { 
     refs : { 
      Profileinfo: 'profileinfo' 
     } 
    } 

在ProfileInfo鉴于

对于选择标签，我建议你给的itemId标记像这

{ 
    xtype:'label', 
    itemId: 'member' 
} 

在你的控制器loadList功能

如果您有字段（文本框，selectfield等）里面FormPanel中，你可以使用setValues()为我做如下设置数据。

但标签不是一个字段，因此，您必须选择它，然后用setHtml()设置数据

loadList:function(me, index, target, record, e, eOpts){ 

Ext.Viewport.setActiveItem({ xtype:'profileinfo'}); 

this.getProfileinfo().setValues(record.getData()); 

//As you posted in your question, I am assuming member label is child of Profileinfo 
this.getProfileinfo().getComponent('member').setHtml(record.getData().member_name) 

} 

最重要的是

属性或字段在record应该匹配的名称然后只有setValues()工作。

例

如果您在frompanel

有场这样

{ 
    xtype: 'textfield', 
    label: 'First Name', 
    name: 'Firstname' 
} 

record.getData()应该有它Firstname财产。

---

更新面板与TPL

设置数据可以说，你有面板这样

Ext.define('MailApp.view.MessageDetails', { 
    extend: 'Ext.Panel', 
    xtype: 'messageDetails', 
    config: { 
     items : [{ 
       xtype: 'titlebar', 
       docked: 'top', 
       itemId: 'detailsTitle' 
       }, 
      { 
      xtype : 'panel', 
      itemId : 'details', 
      tpl : new Ext.Template(
      '<div class="details">', 
      '<p>From : {from}</p>', 
      '<p>Subject : {subject}</p>', 
      '<p>Message : {message}</p>',     
      </div>' 
      ) 
     }] 
    } 
}); 

在你的控制器loadList功能

loadList:function(me, index, target, record, e, eOpts){ 
var data = record.getData(); 

Ext.Viewport.setActiveItem({ xtype:'messageDetails'}); 

// Don't forget to put refference to work this.getMessageDetails() 

this.getMessageDetails().getComponent('details').setData(data); 

this.getMessageDetails().getComponent('detailsTitle').setHtml(data.detailsTitle) 

} 

当您打印的console.log（record.data（）），你应该有

Object {from: "Apple", subject: "welcome", message: "Apple welcomes you to mail app", detailsTitle: " Mail Deatils", id: "ext-record-1", xindex: 1} 

我的意思是性能应该与第三方物流领域。

这是你可以使用tpl在面板的自定义HTML中设置数据。