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

      0  

    Exclamation Unanswered: Problem with Carousel on iPad2

    Unanswered: Problem with Carousel on iPad2


    Hi,

    I have a problem with a carousel.
    After I remove all items with removeAll and added new items with add it goes totally wrong.
    The funny thing is, it works just fine after I once rotate the iPad2.

    Any hint how I could solve this problem?

    I'm grateful for any help, thanks!

    Best regards, Alexander
    Last edited by aschoenfeld; 16 Jan 2012 at 11:55 PM. Reason: Bug was fixed in sample, needed source code is below

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    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


    This is working for me:

    Code:
    var carousel = new Ext.Carousel({
        fullscreen : true,
        items      : [
            {
                html : 'One'
            },
            {
                html : 'Two'
            }
        ]
    });
    
    setTimeout(function() {
        carousel.removeAll();
    
        carousel.add({
            html : 'Three'
        });
        carousel.doLayout();
    });
    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
    Jan 2011
    Posts
    13
    Vote Rating
    0
    aschoenfeld is on a distinguished road

      0  

    Default


    Hi Mitchell,

    easy samples work for me too, but I have this weired behaviour in a bigger project where I have a lot of panes.

    Here is the code part I used:
    Code:
            this.carousel.removeAll();        
            var obj = storeArticle.data.get("obj");
            var issue = storeArticle.data.get("issue");
            var year = storeArticle.data.get("year");
            var page = storeArticle.data.get("page");
            var pageuntil = storeArticle.data.get("pageuntil");
    
    
            for (index=page; index <= pageuntil; index++) {
                console.log('image_page.aspx?obj=' + obj + '&year=' + year + '&issue=' + issue + '&page=' + index + '');
                this.carousel.add({
                    html: '<img class="page" src="image_page.aspx?obj=' + obj + '&year=' + year + '&issue=' + issue + '&page=' + index + '" alt="">'
                });
            }
    
    
            console.log(this.carousel);
    
    
            this.carousel.doLayout();
    I find it very strange that it works fine after I rotate once. Can I call some function to simulate the rotation? Maybe this will fix my problem?

    Best regards,
    Alexander

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

      0  

    Default


    I managed to fix this problem with this article on stackoverflow:
    http://stackoverflow.com/questions/6351005/reload-carousel-items

    I
    n short I needed to give the carousel an id and use Ext.getCmp('myCarouselId') instead of this.carousel.

    Hope this can help somebody else, too

    Best regards,
    Alexander

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    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 shouldn't use id except for debugging. You can easily have name collisions and it's just not worth coming up with some id naming scheme.
    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

Tags for this Thread