Sencha touch details from disclosure

Question

I have a sencha touch list sending to a details form, without issue - except one:

I need to pass a variable from the store record to the details page (an image), but I need to 'clean' the paths out of it prior to this. To keep the code clean, I will only paste the relevant parts here. This is my list:

var directoryList = Ext.create('Ext.List', {
        loadingText: "Loading Directory...",
        emptyText: "<div class='listing'>Nothing in the directory!</div>",
        minHeight:'90%',
        cls: 'subList',
        store: 'directoryStore',
        id:'directory_list',
        grouped: true,
        deferEmptyText: true,
        indexBar: true,
        onItemDisclosure : true,
        itemTpl: tpl,
        listeners: {
            disclose: {
                fn: this.onDirectoryListDisclose,
                scope: this
            },
            itemtap: {
                fn: this.onDirectoryListClick,
                scope: this
            }
        }
    });

Now my Controller holds the function, which fires correctly:

onMyRecordCommand: function(list, record) {
var activateRecord = this.getRecordContainer();
activateRecord.setRecord(record);
    var str = record.data.directory_avatar;
    var avatar = str.replace('{filedir_49}',"resources/images/");

    console.log(avatar);

    Ext.Viewport.animateActiveItem(activateRecord, this.slideLeftTransition);
},

My console spits out exactly the value I need to place into the image object on the next page, but I can't seem to push this information either into the record, or pull the variable 'avatar' up from my details page. My details page (annotated):

Ext.define("directory.view.DirectoryRecord", {
extend: "Ext.form.Panel",
requires: ["Ext.form.FieldSet","Ext.field.Hidden","Ext.Img"],
xtype: 'directoryRecord',
config:{
    scrollable:'vertical'
},

etc etc then...

    var personTitle = {
        xtype: 'textfield',
        name: 'title',
        label: 'Name',
        disabled:true
    };

    var personJobTitle = {
        xtype: 'textfield',
        name: 'directory_job_title',
        label: 'Job Title',
        disabled:true
    };

    var personAvatar = {
        xtype: 'image',
        mode: 'image',
        src : "..."
    };

Title and job title come in automatically as they are form fields and the record has been pushed through. In the avatar, I cannot come up with a way to read in the information.

record.data.avatar - doesn't work, as avatar is not part of the record but a variable.

I know this must be something entirely simple, but its the simple things that hold up the show. Any help would be appreciated.

Answer 1

Give itemId to personAvatar

 var personAvatar = {
        xtype: 'image',
        mode: 'image',
        itemId : 'avatar',
        src : ""
 }

In controller

onMyRecordCommand: function(list, record) {
   var activateRecord = this.getRecordContainer();
    activateRecord.setRecord(record);
    var str = record.data.directory_avatar;
    var avatar = str.replace('{filedir_49}',"resources/images/");    
    console.log(avatar);

     activateRecord.down('fieldset').getComponent('avatar').setSrc(avatar);

    Ext.Viewport.animateActiveItem(activateRecord, this.slideLeftTransition);
},