Results 1 to 10 of 10

Thread: Recreated carousel item doesn't get added to carousel: Two-year old bug

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    35

    Default Recreated carousel item doesn't get added to carousel: Two-year old bug

    I have a carousel that, as you swipe forward and backward, progressively creates and destroys carousel items (rather than having all carousel items at the same time, for app performance). At any time, you will have either two items (if you're at either end of the list), or three items (if you're in the middle of the list).

    However, I have found a bug that I absolutely cannot shake; I've actually had this bug for over two years now, and have just been handling it with pretty bad mitigations. Essentially, there are instances where a carousel item does not get fully created, the most common of which is the following:
    • Start at the beginning of the carousel
    • Swipe to the end of the carousel
    • Start swiping back toward the beginning of the carousel
    • The DOM elements for the item 3 spots from the end will not exist
    The "dead item" in question does exist according to sencha, if you call Ext.getCmp() with its ID, everything shows up as expected. However, the item's contents do not exist in the DOM; the only DOM element for the item is:

    HTML Code:
    <div class="x-carousel-item x-sized" id="ext-component-1" style="-webkit-transform: translate3d(0px, 0px, 0px);"></div>
    I've tried modulating the object's id so the 1st and 2nd instances of creating the object have different ids, destroying the contents of the carousel completely, repeatedly calling destroy on the object in question, and a million other things. The only "solution" I've found is Ext.Viewport.removeAll(true) and replacing the whole interface, which is obviously a terrible solution, and has its own bugs.

    I've even tried gutting my app completely and going with the most bare bones code, with a single object and a single listener. Still happens. Which leads me to believe that this might be a bug in Sencha Touch. The entire code for the simplified app is below. The sample app is here. Any help here would be unbelievably well-appreciated.

    Code:
    launch: function() {
            Ext.fly('appLoadingIndicator').setHtml()
    
    
            index = 1;
    
    
            Ext.Viewport.add({
                id:     'carousel',
                xtype:  'carousel',
                indicator:false,
                listeners: {
                    activeitemchange: function(carousel_item, new_active_item, old_active_item){
                        console.log("Aciveitemhange")
                        carousel = Ext.getCmp('carousel');
    
    
                        index = Number(new_active_item.getId())
    
    
                        carousel.getItems().each(function(item){
                            if(Number(carousel.getActiveItem().getId()) != Number(item.getId())){
                                item.destroy();
                            }
                        });
    
    
                        if(Number(new_active_item.getId()) > Number(old_active_item.getId())){
                            type = "next";
                        }else{
                            type = "previous";
                        }
                        console.log("type: "+type);
    
    
                        createCarouselObject = function(index_value){
                            var carousel_object = {
                                id:     ''+index_value+'',
                                style:  'font-size:100px',
                                html:   index_value
                            };
                            return carousel_object;
                        }
    
    
                        if(type == "next"){
                            if(index < 7){
                                var number = index + 1;
                                carousel.add(createCarouselObject(number));
                                var number = index - 1;
                                carousel.insert(0, createCarouselObject(number));
                            }else{
                                var number = index - 1;
                                carousel.insert(0, createCarouselObject(number));
                            }
                        }else if(type == "previous"){
                            if(index > 1){
                                var number = index + 1;
                                carousel.add(createCarouselObject(number));
                                var number = index - 1;
                                carousel.insert(0, createCarouselObject(number));
                            }else{
                                var number = index + 1;
                                carousel.add(createCarouselObject(number));
                            }
                        }
                    }
                },
                items:[
                    {
                        id:   "1",
                        style:  'font-size:100px',
                        html: "1"
                    },
                    {
                        id: "2",
                        style:  'font-size:100px',
                        html:"2"
                    }
                ]
            })
    }

  2. #2
    Sencha Premium User alexander.urban's Avatar
    Join Date
    Nov 2013
    Posts
    320

    Default

    Have you enabled that the carousel item is destroyed when it is removed from the carousel?

    http://docs.sencha.com/touch/2.3.1/#...fg-autoDestroy

    Otherwise the issue could be that such a component does still exist, and if you create another one, the id property is no longer unique. In case of non-unique ids, behaviour is IIRC undefined.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    35

    Default

    Yes, unfortunately I do try to destroy the carousel items, I call item.destroy(); . I get the same behavior when I do carousel.removeAll(true)

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    35

    Default

    Great!

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    35

    Default

    Hello, I'd like to check in on the status of this bug; it's continued to be particularly problematic for my app. Has anyone found a work-around or, even better, a proper fix?

  7. #7

    Default

    Great to find this thread. We've been battling this bug too and have put a huge amount of time into trying to solve it. Very very frustrating and critical to our app. Any insights or a fix would be immensely appreciated.

  8. #8
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    35

    Default

    Just a ping on this bug, which has continued to plague my app development. Any news on this would be great.

  9. #9
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Sorry to hear this bug is causing such problems. It is still unresolved at this time. I've added a note and raised the priority of the ticket to get it some attention. Beyond that, you might open a support ticket to see whether an override is possible for this issue.

  10. #10
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    35

    Default

    Thanks Gary!

Similar Threads

  1. Recreated carousel item doesn't get added to carousel: Two-year old bug
    By SergioPrado in forum Sencha Touch 2.x: Q&A
    Replies: 5
    Last Post: 17 Apr 2015, 10:48 AM
  2. Prevent Carousel.add from setting the added item as active
    By tt88 in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 11 May 2014, 11:04 PM
  3. Recreated active item doesn't get added to any container
    By SergioPrado in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 6 Feb 2013, 3:53 PM
  4. [CLOSED] Ext.carousel.Carousel: add() after removeAll() doesn't set active item
    By dbarton in forum Sencha Touch 2.x: Bugs
    Replies: 7
    Last Post: 20 Nov 2012, 11:51 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •