SenchaTouch: Ext.getCmp().setSrc() method is not working - image

Question

I am trying to change the source of an image using setSrc but I get this error:
Uncaught TypeError: Cannot call method 'setSrc' of undefined
Ext.Ajax.request.success Ext.apply.callback Ext.define.onComplete
Ext.define.onStateChange (anonymous function)
This is my source code :
View Page:
Ext.define('MechanicalTerk.view.Picture', {
extend: 'Ext.Container',
xtype: 'Picture',
requires: [
'Ext.data.Store'
],
config: {
layout: 'vbox',
items:
[
{
xtype: 'toolbar',
docked: 'top',
title: 'Requests',
minHeight: '60px',
items: [
{
xtype:'button',
ui:'back button',
id:'backButton',
text:'Back'
},{
xtype: 'button',
id:'logoutButton',
text: 'Logout'
}
],
},
{
xtype:'image',
height:500,
id:'layoutImage'
}
]
}
});
Controller:
Ext.define('MechanicalTerk.controller.PictureController',{
extend:'Ext.app.Controller',
showPicture: function(userID,sentAt){
Ext.Ajax.request({
url:'app/Model/database.php',
params: {
functionID: 3,
userID: userID,
sentAt: sentAt,
},
success: function (response, opts){
Ext.getCmp('layoutImage').setSrc('http://www.sencha.com/img/20110215-feat-perf.png');
Ext.Viewport.setActiveItem(Ext.create('MechanicalTerk.view.Picture'));
}
});
}
});
Any ideas ?

Answer 1

You should consider not using your own id and instead use an itemId. This is probably happening because you are trying to re-use a component that has been destroyed. I would suggest creating a ref to your image in your controller so you can access it.
So I'm thinking:
Ext.define('MechanicalTerk.controller.PictureController',{
extend:'Ext.app.Controller',
config: {
refs : {
myImage : {
autoCreate: true,
selector: '#myimage',//assuming your image's itemId is 'myimage'
xtype: 'image'
}
}
},
showPicture: function(userID,sentAt){
Ext.Ajax.request({
url:'app/Model/database.php',
params: {
functionID: 3,
userID: userID,
sentAt: sentAt,
},
success: function (response, opts){
var me = this;
me.getMyImage().setSrc('http://www.sencha.com/img/20110215-feat-perf.png');
Ext.Viewport.setActiveItem(Ext.create('MechanicalTerk.view.Picture'));
}
});
}
});
PS: Not tested but try that approach.