无法调用未定义的方法'add'

Question

我一直试图在sencha touch 2.1.1中创建一个动态的carousal，它从wordpress json数据中获取图像。 但是当我在商店中调用加载侦听器时，它会给出错误。 我在另一个演示sencha应用程序上品尝了它在那里工作得很好但是当我在这里添加它时它显示错误

Uncaught TypeError: Cannot call method 'add' of undefined 

我在这里分享我的视图，模型和存储文件

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文件

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文件

Ext.define('Flugelsoft.model.Portfolio',{
           extend:'Ext.data.Model',

           config:{
               fields: [{name: 'title', type: 'string'},{name: 'content', type: 'string'},{name:'thumbnail',type:'image/png'}]
          }


});

提前谢谢

Answer 1

首先，您应该在调用Portfolio之前在视口中添加Ext.getCmp('carouselid');视图

<强>模型

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 
   }
});

商品

    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'
                   }
         },  
     } 
});  

添加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')
              });
            }
        }
    }
    });    

sencha touch中没有image/png字段类型。以下类型仅有效

1. auto：Object
2. 布尔值：对象
3. 日期：对象
4. float：Object
5. integer：Object
6. number：Object
7. string：Object