1. #1
    Touch Premium Member
    Join Date
    Sep 2011
    Posts
    41
    Vote Rating
    0
    prasanna_hr is on a distinguished road

      0  

    Default Infinite Carousel with ST2

    Infinite Carousel with ST2


    I have implemented a simple infinite carousel. This is an implementation by setting a listener to 'activeitemchange'. Attached is the code. Unzip the contents to root of Sencha directory and run. I have used Sencha Touch 2 RC.

    Can someone from Sencha let me know if this implementation is good to use in our app? Any suggestions to tweak the code?

    Thanks & Regards
    Prasanna
    Attached Files

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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


    You have an extension of Ext.carousel.Carousel but the logic to handle the switching isn't in the class definition, it's in the instance. You should have the activeitemchange listener in the class definition.
    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
    Touch Premium Member
    Join Date
    Sep 2011
    Posts
    41
    Vote Rating
    0
    prasanna_hr is on a distinguished road

      0  

    Default Updated Code

    Updated Code


    Thanks for your feedback. I had realized that and have updated the code to have a all-inclusive class that extends carousel. Updated code is below. Please provide your feedback. Do you foresee any performance limitation due to the approach?

    By the way, i want to thank you for all the help you are providing through this forum. It has been extremely helpful for us.

    Code:
    /**********************************************************************************
    * Looping carousel makes the carousel loop infinitely. When the last item of the 
    * carousel is reached, swiping left would take it to the first item in the carousel.
    * Likewise when the first item is reached, swiping right will bring the last item in the 
    * carousel. So, in other words, carousel will never find its 'end' or the 'beginning'
    *
    * IMPORTANT NOTE:  Current limitation requires the value of the 'indicator' to be set to 'false' for this to work.
    *
    *************************************************************************************/
    Ext.define('RM.view.LoopingCarousel', {
                            
            extend: 'Ext.carousel.Carousel',
            
            rotateItemBack: function(item){
                if(!item) return null;
                var initem = item.items;
                var numitems = initem.length;
                var newItem = [];
                
                /* Rearrange the items. Place the 
                 * last item at the beginning
                 */
                newItem.push(initem[numitems-1]);
                for(i=0; i<numitems-1; ++i)
                    newItem.push(initem[i]);
                
                //item.items = newItem;
                //return item;
                return newItem;
            },
            
            rotateItemFront: function(item){
                if(!item) return null;
                var initem = item.items;
                var numitems = initem.length;
                var newItem = [];
                
                /* Rearrange the items. Place the 
                 * first item at the end
                 */
                for(i=0; i<numitems-1; ++i)
                    newItem.push(initem[i+1]);
                newItem.push(initem[0]);
                
                //item.items = newItem;
                //return item;
                return newItem;
            },
            
           config:{
                indicator: false,
                listeners:{
                    /*******************************************************
                    * Ensure that 'activeitemchangeloop' event is called on 
                    * active item change. This is to ensure the looping carousal
                    * behavior.
                    *******************************************************/
                    activeitemchange:function(){
                        this.fireEvent('activeitemchangeloop', arguments);
                    },
    
    
                    /******************************************************************
                    * This event is responsible for making the carousel infinitely looping
                    * views tha use this carousel implementatation must use a fireEvent call
                    * to call this event in their 'activeitemchange' in order to get the looping 
                    * behavior.
                    *     this.fireEvent('activeitemchangeloop', arguments);
                    ********************************************************************/
                    activeitemchangeloop: function ()
                    {
                         var activeIndex = this.getActiveIndex(),
                            maxIndex = this.getMaxItemIndex();
                        
                        if(activeIndex == 0)
                        {
                            var items = this.getItems();
                            
                            var newItems = this.rotateItemBack(items);
                            this.removeAll(false, false);
                            this.add(newItems);
                                                            
                            this.setActiveItem(1);
                            this.refresh();
                        }
                        
                        else if(activeIndex == maxIndex)
                        {
                            var items = this.getItems();
                            
                            var newItems = this.rotateItemFront(items);
                            this.removeAll(false, false);
                            this.add(newItems);
                                                                        
                            this.setActiveItem(maxIndex-1);
                            this.refresh();
    
    
                        }
                                            
                    }
                }
            }
                    
    });
    Quote Originally Posted by mitchellsimoens View Post
    You have an extension of Ext.carousel.Carousel but the logic to handle the switching isn't in the class definition, it's in the instance. You should have the activeitemchange listener in the class definition.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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


    The performance hit to do this is you are going to be adding and removing from the DOM and read/writes to the DOM is going to hit performance. However, this is going to be expected with this and would be more dependent on the complexity of the items you are adding and removing.

    One thing is you shouldn't use the listeners config within the config object. Items in the config object are merged but the problem lies in like keys so if you pass the listeners config when instantiating this carousel and you pass in activeitemchange it will break your class. A better way is in the initialize method, use the on() method to add a listener:

    Code:
    initialize : function() {
        var me = this;
    
        me.callParent();
    
        me.on('activeitemchange', 'handleItemChange', me);
    },
    
    handleItemChange : function() {.....}
    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.

Thread Participants: 1