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

我正在尝试将数据从控制器传递到现有视图，我已经尝试了以下操作，但没有一个有效，我希望传递数据，以便在现有面板上显示它

来自控制器

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

是一个面板，其中有一个

标题栏

，我将

标题

显示为

{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

可用 但是我无法使用

{member\u name}

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);





    }

});

---

您说过您要在面板的

initialize

方法中获取数据，所以您可以这样做

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

---

根据您的评论，您可以将数据设置到所需的面板

更新

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

在控制器中引用formPanel

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

在ProfileInfo视图中

对于选择标签，我建议您像这样给标签指定itemId

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

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: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)

}

如果formpanel中有字段（textfield、selectfield等），可以使用

setValues（）

设置数据，如下所示

但是label不是字段，所以您必须选择它，然后使用

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)

}

最重要的

记录中的属性或字段应与frompanel中的字段名称匹配，然后只有
setValues（）
起作用

示例

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

如果在frompanel中有这样的字段

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

record.getData（）
中应该包含
Firstname
属性


使用tpl更新面板中的设置数据

假设你有这样的面板

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

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

打印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中的字段

这就是您可以使用tpl在面板的自定义HTML中设置数据的方法。
是否仍然可以使用
{member\u name}
进行设置，因为我有其他组件要设置，即使您建议的代码也不工作您的意思是不工作。。您是否收到任何错误或设置未定义？是的，它显示在控制台中，但不显示在titleis console.log（this.down（'titlebar'））中；打印标题栏对象？是的，它遵循MVC，我在sencha touch中始终遵循MVC。如果你不想要表格。。使用tpl创建面板并将html放入其中，然后使用控制器中的setData（）函数设置数据，让我在回答中解释一下。。