如何从商店加载回调函数中将项目添加到轮播组件?

时间:2012-12-16 11:20:03

标签: sencha-touch sencha-touch-2 jscript

我不知道如何在下面的最后两行代码中添加项目。来自flickr的图像正确加载。 TR.view.photoset.Carousel.add(items)导致错误消息

  

“Uncaught TypeError:Object function(){return this.constructor.apply(this,arguments);}没有方法'add'”

Ext.define('TR.view.photoset.Carousel', {
extend: 'Ext.carousel.Carousel',
alias: 'widget.photosetcarousel',
config: {
        store: 'PhotosetPhotos',
        itemTpl: '<img src="http://src.sencha.io/{[Ext.Viewport.getOrientation()]}/{photo_url}" />',
        title: 'Flickr Photoset',
        iconCls: 'hot',
        iconMask: true,

        scrollable: {
            direction: 'vertical',
            directionLock: true
        },          
},

initialize: function( me ) {
    var store = Ext.getStore('PhotosetPhotos');

    store.clearFilter(true);
    store.filter('photoset', '72157632230262446' );
    store.load();       

    store.load( function(pictures , operation ) {
        var items = [];

        Ext.each(pictures, function(picture) {
            if (!picture.get('photo_url')) {
                return;
            }

            items.push({
                xtype: 'flickrimage',
                picture: picture
            });             
        });

        // fill items into carousel above
     {???}.add(items);
     {???}.setActiveItem(0);
    });
}

});

感谢您的帮助...

2 个答案:

答案 0 :(得分:0)

你试过这个吗?

photosetcarousel.setItems(items);

或者可以给旋转木马一个照片来自photosetcarousel,然后尝试:

var photosetcarousel = Ext.getCmp('photosetcarousel');
photosetcarousel.setItems(items);

未经测试......

你也可以参考他的例子:

http://web.archive.org/web/20121109164506/http://edspencer.net/2012/02/building-a-data-driven-image-carousel-with-sencha-touch-2.html

答案 1 :(得分:0)

我把代码填入旋转木马中的物品进入主控制器。

Ext.define('MY.controller.Main' , {
  extend: 'Ext.app.Controller',

    // define a reference to the mycarousel view
    refs: [
      {
        ref: 'mycarouselView',
        selector: '#mycarousel'
      } 
    ],

    // let the control call the init function of the carousel
    init: function() {
      this.control( {
        '#mycarousel': {
           initialize: 'initMycarousel'     
        }
      });   
    },

    // then I can access the carousel view and fill it ...
    initMycarousel: function() {
      var carousel = this.getMycarouselView();
      var store = Ext.getStore('MycarouselPhotos');

      store.clearFilter(true);
      store.filter('photoset', '72157631990018061' );
      store.load();       

      store.load( function(pictures , operation ) {
      var items = [];

      Ext.each(pictures, function(picture) {
        if (!picture.get('photo_url')) {
          return;
            }

        items.push({
          xtype: 'image',
          src: picture.data.photo_url
        });             
      });

      // fill items into carousel
      carousel.setItems(items);
      carousel.setActiveItem(0);
 });

}