1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    13
    Vote Rating
    0
    aschoenfeld is on a distinguished road

      0  

    Question Dynamic carousel weired behavior

    Dynamic carousel weired behavior


    Hi,

    I'm currently a bit confused when using a dynamic carousel.

    When I set new cards using "Test2" it works just fine, but the variant on "Test1" (which is nearly the same) it doesn't work.

    Could somebody please give me a hint/solution for this problem?

    Here is a sample code that shows my problem (the complete code uses a database, so I made a smaller sample).

    Code:
    var testSet = 0;
    
    var test = function(sender) {
        
        switch (testSet) {
            case 0:
                sender.carousel.add({ html: 'Card 1' });
                sender.carousel.add({ html: 'Card 2' });
                break;
    
    
            case 1:
                sender.carousel.add({ html: 'Card 3' });
                sender.carousel.add({ html: 'Card 4' });
                sender.carousel.add({ html: 'Card 5' });
                break;
    
    
            case 2:
                sender.carousel.add({ html: 'Card 6' });
                sender.carousel.add({ html: 'Card 7' });
                sender.carousel.add({ html: 'Card 8' });
                sender.carousel.add({ html: 'Card 9' });
                break;
        }
    }
    
    
    Ext.ns('test');
    test.carousel = Ext.extend(Ext.Panel, {
        fullscreen: true,
        layout: 'fit',
        initComponent : function() {
            var myItems = [];
            myItems.push(new Ext.Container({
                html: 'Loading...'
            }));
    
    
            this.carousel = new Ext.Carousel({
                items: myItems
            });
            this.items = [this.carousel];
    
    
            test.carousel.superclass.initComponent.call(this);
            
            this.on('afterrender', function() {
                this.load();
            });
        },
        
        load: function() {
            // console.log('load called');
            this.carousel.removeAll();
            test(this);
            this.carousel.doLayout();
        }
    });
    
    
    var carousel1;
    
    
    Ext.setup({
        icon: 'icon.png',
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        glossOnIcon: false,
        onReady: function() {
            carousel1 = new test.carousel();
            
            panel = new Ext.Panel({
                fullscreen: true,
                layout: 'card',
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{
                        text: 'Test1',
                        handler: function(){
                            testSet = 1;
                            carousel1.load();                        
                        }
                    },{
                        text: 'Test2',
                        handler: function(){
                            testSet = 2;
                            carousel1.load();                        
                        }
                    }]
                }], 
                items: [carousel1]
            });
            
        }
    });
    Thanks, Alex

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    13
    Vote Rating
    0
    aschoenfeld is on a distinguished road

      0  

    Default


    Ah, found the error and fixed it above.
    Guess it took me a bit to find it

    Anyway, is the code okay like above if I want to show images in a carousel or is there a better solution?

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default I've got a solution...

    I've got a solution...


    I've got a solution for grabbing images automatically from a folder and displaying them 1 per carousel if that helps, the last comment on this page:

    http://www.sencha.com/forum/showthre...namic+carousel

    :-)

Thread Participants: 1