Cannot call method 'add' of undefined - sencha-touch

Question

I have been try trying to make a dynamic carousal in sencha touch 2.1.1 which fetches the images from wordpress json data..
but when i call the load listener in store it gives and error .
I tasted this on another demo sencha app it was working fine there but when i add it here it shows up the error
Uncaught TypeError: Cannot call method 'add' of undefined
I am sharing my view,model,and store files here
Ext.define('Flugelsoft.view.Portfolio', {
extend:'Ext.Container' ,
xtype: 'portfolio',
fullscreen: true,
//store:'Portfolios',
requires: ['Flugelsoft.store.Portfolios', 'Ext.dataview.List', 'Ext.Img','Ext.carousel.Carousel'],
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: "carousel",
id: 'carouselid'
}
]
}
});
store.js file
var token=localStorage.getItem("access_token");
Ext.define("Flugelsoft.store.Portfolios", {
extend: "Ext.data.Store",
requires: ["Ext.data.proxy.JsonP"],
config: {
model: "Flugelsoft.model.Portfolio",
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://www.flugelsoft.net/?json=get_category_posts&category_id=2&access_token='+token,
reader: {
type: 'json',
rootProperty: 'posts'
}
},
}
});
var newPanel = Ext.create('Flugelsoft.store.Portfolios', {
listeners:{
load: function( me, records, successful, operation, eOpts ){
console.log("data loaded", records);
myCarousel = Ext.getCmp('carouselid');
for(var i=0; i<records.length; i++){
//THE ERROR IS GENERATING IN THIS LINE myCarousal.add
myCarousel.add({
xtype: 'image',
src: records[i].get('thumbnail')
});
}
}
}
});
Model.js file
Ext.define('Flugelsoft.model.Portfolio',{
extend:'Ext.data.Model',
config:{
fields: [{name: 'title', type: 'string'},{name: 'content', type: 'string'},{name:'thumbnail',type:'image/png'}]
}
});
Thank you in advance

Answer 1

First of all you should add Portfolio view in viewport before you invoke Ext.getCmp('carouselid');
Model
Ext.define('GoodNews.model.Portfolio',{
extend:'Ext.data.Model',
config:{
fields: [{name: 'title', type: 'string'},
{name: 'content', type: 'string'},
{name:'thumbnail',type:'string'}]
//thumbnail should be url for accessing picture from the server
}
});
Store
Ext.define("GoodNews.store.Portfolios", {
extend: "Ext.data.Store",
requires: ["Ext.data.proxy.JsonP"],
config: {
model: "GoodNews.model.Portfolio",
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://www.flugelsoft.net/?json=get_category_posts&category_id=2&access_token='+token,
reader: {
type: 'json',
rootProperty: 'posts'
}
},
}
});
Add the portfolio
Ext.Viewport.add({xtype : 'portfolio'});
var newPanel = Ext.create('GoodNews.store.Portfolios', {
listeners:{
load: function( me, records, successful, operation, eOpts ){
console.log("data loaded", records);
myCarousel = Ext.getCmp('carouselid');
for(var i=0; i<records.length; i++){
myCarousel.add({
xtype: 'image',
src: records[i].get('thumbnail')
});
}
}
}
});
There is no image/png field type in sencha touch. following types only valid
auto: Object
boolean: Object
date: Object
float: Object
integer: Object
number: Object
string: Object