PDA

View Full Version : Change Source of Picture Dinamycally using "setSrc" gets me undefined error



Sha90
7 Apr 2013, 6:29 AM
I am trying to change the source of a picture using setSrc method, but it seems, it is not working for some reason, probably the way I am using the method...
This is the error I am getting
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 code:
-View tab where it has the picture


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 ?

slemmon
8 Apr 2013, 9:57 PM
Sounds like 'layoutImage' is not found when doing the getCmp. Is that component instantiated/rendered at the time you are trying to do getCmp? Is it in a tab in a tabpanel that has not been active?

Sha90
9 Apr 2013, 4:59 AM
Hi Slemmon,

Thank you for your support !

Actually, the layoutimage is in tab panel, and I am trying to change the source of image just before I switch to the other panel which has the layoutimage, and if then it is not activated, how can I activate it before I switch to this panel ?

Thank you so much for your support again !

slemmon
9 Apr 2013, 9:04 AM
With tabPanel you can render the tabs prior to the user clicking on the (normally they're not rendered until they're activated by the tab being click on), but that does have a penalty in that the DOM may be unnecessarily large as all tabs are rendered all the time -vs- just in time. See:
http://docs.sencha.com/ext-js/4-2/#!/api/Ext.tab.Panel-cfg-deferredRender