1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    2
    jncoates is on a distinguished road

      0  

    Default Dynamically Adding items to carousel and Active Item Sencha Touch 2.2

    Dynamically Adding items to carousel and Active Item Sencha Touch 2.2


    Since upgrading to Sencha Touch 2.2 I am having an issue with adding items to a carousel control, when a carousels activeItem is set.

    Essentially I am building my carousel items like this:
    Code:
    var myCarousel = this.getMyCarouselControl();
    myCarousel.removeAll(true);
    for (y=0;y<10;y++){myCarousel.add({xtype: 'container', .. ..});} // Add Items to Carousel
    When i first view the carousel all items are displaying correctly. The issue happens when i re-run the code above, re-building the carousel items. The item that is set as the ActiveItem, will not render to the DOM. It will however display if i navigate to an item that puts the original active item outside the current buffer size of the carousel and navigate back essentially rebuilding that item.

    I believe the Item at the position of the current ActiveItems index is not being initialized when using the add() function.

    I have also tried the following iterations with the same result,
    Code:
    var myCarousel = this.getMyCarouselControl();
    var myItems = [];
    myCarousel.removeAll(true);
    for (y=0;y<10;y++){myItems.push({xtype: 'container', .. ..});} // Build Items array
     myCarousel.setItems(myItems );
    Has anyone encountered this issue? Is there a known way to force a reset/rebuild of all carousel items?

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    2
    jncoates is on a distinguished road

      2  

    Default Temporary Solution Found

    Temporary Solution Found


    I have found a workaround for this issue:

    i am now using
    Code:
    myCarousel.setActiveItem({xtype: 'container', ... ...});
    in-place of
    Code:
    myCarousel.add({xtype: 'container', ... ...});
    see final code below:
    Code:
    var myCarousel = this.getMyCarouselControl();
    myCarousel.removeAll(true);
    for (y=0;y<10;y++){myCarousel.setActiveItem({xtype: 'container', .. ..});} //Add Items to Carousel

    Although this works i still feel that the add function should work as well.