Cannot call method 'add' of undefined

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

1. auto: Object
2. boolean: Object
3. date: Object
4. float: Object
5. integer: Object
6. number: Object
7. string: Object