Touch 2 dynamic carousel

[bstras21]

Does anyone have any good examples of integrating a dynamic carousel/certain amount of items per page via the controller?

Thanks!

[mitchellsimoens]

Just a simple case of add/remove on the carousel

[bstras21]

Looks like that is what I was looking for, thanks.

[pm.sreejith]

Does anyone have any good examples of integrating a dynamic carousel/certain amount of items per page via the controller?

Thanks!

I hope you are using ST2.0 pr2 with MVC pattern. please try in the way, given below:

controller
-----------------
refs: [
    {   ref:'article',
        selector:'article'
    },

init: function() {
        this.onHomeCarouselLoad();  //Loading contents to carousel home page top section
                
    },

onHomeCarouselLoad: function() {
        var articleHomeCarousel= this.getArticleCarouselStore();
        articleHomeCarousel.load({
            scope   : this,
            callback: function(records, operation, success) {
                var items = [];
                //the operation object contains all of the details of the load operation
                articleHomeCarousel.each(function(rec){
                    items.push({
                        html:"<div style='float:left;width:100%;'><div class='txttitle' style='float:left;width:40%;margin-top:30px;margin-left:10px;'><h1 id='artTitle' lang='"+ rec.get('articleid') +"'>"+ rec.get('title') +"</h1><p>"+ rec.get('shortdesc') +"<a href='#' id='readMore' name='"+ rec.get('articleid') +"'>read more>></a></p></div><div style='float:left;width:57%;'><img id='imgTag' alt='"+ rec.get('articleid') +"' src='"+ rec.get('image') +"' width='100%' height='90%' border='0'/></div></div>"
                    });
                });
                
                this.getArticle().setItems(items);
                this.getArticle().removeAt(0);
                this.getArticle().setActiveItem(0);
            }
        }); 

    }  


store
--------
Ext.define('Sencha.store.ArticleCarousel', {
    extend  : 'Ext.data.Store',
    xtype: 'ArticleCarousel',
    model   : 'Sencha.model.ArticleCarousel',
    requires: ['Sencha.model.ArticleCarousel'],
    
    proxy: {
        type: 'ajax',
        url : 'sample.php',
        reader: {
            type : 'json',
            root : 'articles',
            totalCount : 'total'
        }
    },
    autoLoad: true
});


Model
-----------
Ext.define('Sencha.model.ArticleCarousel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'articleid', type: 'number'},
        {name: 'title', type: 'string'},
        {name: 'shortdesc', type: 'string'},
        {name: 'image', type: 'string'}
    ]
});

view
--------
Ext.define('Sencha.view.Article', {
    extend: 'Ext.Carousel',
    xtype: 'article',
         
    config: {
        title: 'Articles',
        iconCls: 'star',
        height: 400,
        items:[{}]
    }

});

[oddz]

A store can be set on a Carousel because it extends ComponentView.