1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    73
    Vote Rating
    -1
    bstras21 is an unknown quantity at this point

      0  

    Default Touch 2 dynamic carousel

    Touch 2 dynamic carousel


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

    Thanks!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    858
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Just a simple case of add/remove on the carousel
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    73
    Vote Rating
    -1
    bstras21 is an unknown quantity at this point

      0  

    Default Sorry

    Sorry


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

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    30
    Vote Rating
    0
    pm.sreejith is on a distinguished road

      0  

    Cool


    Quote Originally Posted by bstras21 View Post
    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:

    Code:
    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:[{}]
        }
    
    });

  5. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    125
    Vote Rating
    0
    oddz is on a distinguished road

      0  

    Default


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