pass data from controller to existing view in sencha tocuh

Question

i am trying to pass a data from controller to existing view , i have tried following but non of them are working , i want to pass a data so that i can show it over an existing panel.

from controller

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

where profileinfo is the panel where there is a titlebar and i am displaying title as {member_data} which is part of data

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


        console.log(record.data.member_name);

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



    }

i can see in my profileinfo panel's initialize function that data is available but i am not be able to access it using {member_name}

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

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

but data is not reflected in panel

  {

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


    } 

update

here is the profileinfo code

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





    }

});

here is controller code

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



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





    }

Answer 1

You said your getting data in panel's initialize method, So you can do this

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

---

Based on your comments, You can set data to the panel you setRecord.

Update

Have a reference to the formPanel in your controller

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

In ProfileInfo view

For selecting label i suggest you to give itemId to label like this

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

In your controller loadList function

If you have fields (textfield, selectfield, etc) inside formpanel,you can use setValues() for setting data as i done below.

But label is not a field so, you have to select it and then use setHtml() to set data

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)

}

Most important

Properties or fields in the record should match name of the fields in the frompanel, Then only setValues() works.

Example

If you have field like this in frompanel

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

record.getData() should have Firstname property in it.

---

Update for setting data in panel with tpl

Lets say you have panel like this

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

In your controller loadList function

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)

}

When you print console.log(record.data()) you should have

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

I mean properties should match fields in the tpl.

This is what you can do to set data in panel's custom HTML using tpl.