Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-1258 in a recent build.
  1. #1
    Sencha Premium Member
    Join Date
    Aug 2010
    Posts
    24
    Vote Rating
    1
    jensen83 is on a distinguished road

      0  

    Exclamation [PR3] carousel add items dynamically, scroll issue

    [PR3] carousel add items dynamically, scroll issue


    When adding items to a carousel dynamically, the scroll behaviour is messed up for all items except the first one inserted.

    also the secondly added item does not pre-render. so when swiping to the right, the second item just renders after the animation ends.

    Code:
    new Ext.carousel.Carousel({id: 'MyCarousel', items: []});
    
    Ext.getCmp('MyCarousel').add({
        xtype: 'panel',
        scrollable: 'vertical',
        items: [{
            html: 'hello1',
            style: 'background: #ff0000; height: 1000px;'
        }]
    });
    
    Ext.getCmp('MyCarousel').add({
        xtype: 'panel',
        scrollable: 'vertical',
        items: [{
            html: 'hello2',
            style: 'background: #00ff00; height: 1000px;'
        }]
    });

  2. #2
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Thank you for the report.

    Sencha Inc

    Jamie Avins

    @jamieavins

  3. #3
    Sencha - Sencha Touch Dev Team Jacky Nguyen's Avatar
    Join Date
    Jul 2009
    Location
    Palo Alto, California
    Posts
    469
    Vote Rating
    14
    Jacky Nguyen has a spectacular aura about Jacky Nguyen has a spectacular aura about

      0  

    Default


    I can't seem to re-produce the issues you described with PR3 build. Full snippet:

    Code:
    Ext.setup({
        onReady: function () {
            var carousel = Ext.create('Ext.carousel.Carousel');
    
    
            carousel.add({
                xtype: 'panel',
                scrollable: {
                    direction: 'vertical',
                    directionLock: true
                },
                items: [
                    {
                        html: 'hello1',
                        style: 'background: #ff0000; height: 1000px;'
                    }
                ]
            });
    
    
            carousel.add({
                xtype: 'panel',
                scrollable: {
                    direction: 'vertical',
                    directionLock: true
                },
                items: [
                    {
                        html: 'hello2',
                        style: 'background: #00ff00; height: 1000px;'
                    }
                ]
            });
    
    
            Ext.Viewport.add(carousel);
        }
    });
    Sencha Touch Lead Architect

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2010
    Posts
    24
    Vote Rating
    1
    jensen83 is on a distinguished road

      0  

    Default


    it only occurs after the carousel has been added to viewport already... try:

    Code:
    Ext.setup({    onReady: function () {
            var carousel = Ext.create('Ext.carousel.Carousel');
    
    
            Ext.Viewport.add(carousel);
    
    
            carousel.add({
                xtype: 'panel',
                scrollable: {
                    direction: 'vertical',
                    directionLock: true
                },
                items: [
                    {
                        html: 'hello1',
                        style: 'background: #ff0000; height: 1000px;'
                    }
                ]
            });
    
    
    
    
            carousel.add({
                xtype: 'panel',
                scrollable: {
                    direction: 'vertical',
                    directionLock: true
                },
                items: [
                    {
                        html: 'hello2',
                        style: 'background: #00ff00; height: 1000px;'
                    }
                ]
            });
    
    
        }
    });

Thread Participants: 2

Tags for this Thread